2
0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01:00

Merge pull request #149 from offen/development

update index, h styling
This commit is contained in:
Hendrik Niefeld 2021-03-16 21:37:42 +01:00 committed by GitHub
commit c2e61bd52b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 197 additions and 193 deletions

View File

@ -14,28 +14,28 @@ Milestone 1 is completed. This is what we've achieved in the last six weeks.
---
### Extension through middleware
#### Extension through middleware
We have further refined the existing application architecture to make it more robust and accessible to both contributors and people who want to build upon Offen. As a developer, you can transparently control additional behavior by adding or removing middleware.
### Easy to test drive
#### Easy to test drive
Download a single binary file and run it on your local computer to get an Offen instance up and running immediately. At the moment this setup only supports Linux. Windows and MacOS will follow soon.
[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="outline"}
[Download binary](https://8342-180605180-gh.circle-artifacts.com/0/tmp/artifacts/offen-stable.tar.gz){: target="_blank" data-button="outline"}
### Develop without complex setup
#### Develop without complex setup
Docker and Docker-Compose are the only hard requirement for you to develop Offen. We have successfully tested this setup under Linux, Windows and MacOS. Head over to our wiki for instructions how to get the setup up and running.
[Open wiki](https://github.com/offen/offen/wiki/Developing-offen#setup){: target="_blank" data-button="outline"}
### Lightweight and accessible interfaces
#### Lightweight and accessible interfaces
The *Auditorium* is ready for a dry run. It's a functional prototype for accessing and managing user data. We opted for [Choo](https://choo.io/){: target="_blank"} as the application framework and [Tachyons](https://tachyons.io/){: target="_blank"} as the CSS framework.
### Ready to localize
#### Ready to localize
You can now localize all user-related content in server- and client-side applications. At the moment English is the only supported locale, but we would be happy to add more locales soon. Contributors wanted after milestone 3 is completed.
[Get in touch](mailto:hioffen@posteo.de){: data-button="outline"}
### Read the docs
#### Read the docs
The work on our wiki has started. Including documentation for [developers](https://github.com/offen/offen/wiki/Developing-offen){: target="_blank"} as well as for [website operators](https://github.com/offen/offen/wiki/Running-offen){: target="_blank"} who want to deploy and run Offen.
### No reverse proxy required
#### No reverse proxy required
We have further hardened and improved the HTTP server that Offen exposes. If you want to, you can already expose this server to the Internet without having to run a reverse proxy in front of it.
### Up next

View File

@ -18,7 +18,7 @@ While there is lots of theory and writing about how to version and release softw
---
## Happy hacking in Alpha
### Happy hacking in Alpha
In the earliest stage of any project, you will still be figuring out the interfaces your software has to the outside world. Requirements will evolve, be defined and change yet again - and so will your interfaces. Which is fine for quite a while: as long as your development setup allows you to recreate a fresh environment to work against easily, you are free to break basically anything with every commit.
@ -28,23 +28,23 @@ The only decision that affects the outside world at this point is the following:
<img class="smaller-image mt4" alt="Lots of ways to break your software" src="/theme/images/offen-blog-0020-untoldRoads-A.png"/>
## Lots of ways to break your software
### Lots of ways to break your software
Another thing you will need to think about before you can even start versioning your software are the interfaces you expect your users to use, and those that your users will actually use. Just because you do not document a method of your library, it doesn't necessarily mean it will not be used in the wild. And just because your database migration script assumes a well defined set of tables in the application database, it doesn't mean some user might have started storing other data in there. Applications like Offen will have different constraints than libraries or developer tools do. It's important to know if *you need to interface with data, code or humans* as all of these interfaces come with their own set of constraints.
Steering the code being written and the interfaces exposed into a direction where its usage is as unambiguous as possible will pay off when it comes to knowing what you can actually break with a release. If you explicitly consider something to be unstable and internal, communicating this clearly will be of great help to anyone who's trying to use your product or build upon it.
## When do you even start versioning?
### When do you even start versioning?
If you develop software, you want others to use it. If you're a user, you want your software to be reliably versioned and updated. This means that at some point, a project will have to start versioning, and its *users will start to project their expectations onto the version numbers being applied*.
When exactly you choose to start doing this depends on what you are focusing on.
### Feature completeness
#### Feature completeness
Depending on your product, it might not make sense to use it before all of the features you are planning to build are included. Venturing down this path, it's a good opportunity for deferring versioning a little longer. If the lack of features makes adoption impossible anyways, you won't hurt it any further if you don't release versioned software.
### Establishing a userbase
#### Establishing a userbase
Alternatively - assuming your product allows you to do so - you might also want to start shipping way before you are feature complete, establish a userbase, and gain understanding on what these users are doing with your product. These insights come with a price: you need to start versioning. Users that don't have clear and documented ways of upgrading their software without any unexpected surprises stop being users once the version they are using stops being on par with what both you and others are offering. If it's just as easy to install something else as it would be to upgrade to a newer version, why should your users stick?
@ -54,7 +54,7 @@ Just like when working without any approach to versioning *communicating what yo
<img class="smaller-image mt4" alt="Detour" src="/theme/images/offen-blog-0020-untoldRoads-B.png"/>
</div>
## Detour: What's in a version number
### Detour: What's in a version number
If you're planning to label a release with a version number any time soon, it's a good idea to reflect on what this new version number actually means. Both to you, and to your users.
@ -70,21 +70,21 @@ If this appeals to you, and makes versioning sound like a solved problem for you
Another important factor to consider here is which target audience you are actually serving. Will non-technical people really value a version number that tells them about API stability, upgrade paths and such? Could a product like Microsoft Windows really work with such a purely technical versioning scheme? If your audience is far, far away from implementation details, they are probably just interested in you making it work for them.
### SemVer and early stage software
#### SemVer and early stage software
For what their spec calls "initial development", SemVer uses `0.x.x` versions that come with no guarantees at all, which in the scope of this article doesn't leave us with much but the underlying concepts of *breaking changes, features and patches*. Certain scenarios might want to map these to a pre-v1 scheme or at least adopt the same vocabulary when communicating about the changes included in a new release in your changelog.
---
## Flexibility vs Stability
### Flexibility vs Stability
Moving towards a v1.0 every slightly larger project will find itself oscillating between these two goals. What makes decisions in this regard even harder is the fact that both opposites are of equal importance to your project. *Adding new features to a product requires flexibility and stability* at the same time.
Moving towards a v1.0 every slightly larger project will find itself oscillating between these two goals. What makes decisions in this regard even harder is the fact that both opposites are of equal importance to your project. *Adding new features to a product requires flexibility and stability* at the same time.
A common approach towards solving this antagonism is the introduction of budgets for both sides. Maybe each iteration has a dedicated budget for breakage and experimenting, just like it has a budget for areas that remain stable and will only change when their interfaces can be guaranteed to stay the same. Maybe every other iteration will focus on stability while the alternating ones will allow for breakage and experimenting. The latter is a concept adopted early on by the Node.js project where an odd version number will signal "punk rock", i.e. unstable and rapid progress, and even version numbers will signal "Fortune 500", i.e. stability.
Whatever approach a project picks, finding a suitable way of balancing these two requirements will be a major enabler of adoption.
Whatever approach a project picks, finding a suitable way of balancing these two requirements will be a major enabler of adoption.
## Migration plans and pains
### Migration plans and pains
Sometimes, breakage you want to or have to introduce, can be cushioned softly when you are able to supply *scripts and tooling for users* to adjust their setup so that is is compatible with a new version.
@ -94,7 +94,7 @@ The same can be done for configuration changes. If an update requires new or cha
<img class="smaller-image mt4" alt="Eat your own dogfood" src="/theme/images/offen-blog-0020-untoldRoads-C.png"/>
## Eat your own dogfood
### Eat your own dogfood
While this is a scenario you cannot easily create just for its own sake, a setup where *you are a user of your own product* - a.k.a. dogfooding - will be pretty insightful in this context.
@ -102,7 +102,7 @@ You as a user will certainly cover only a single use case, yet this one use case
Keep in mind though that when you represent one usecase, the first hand knowledge your userbase has can give you the big picture. If your project allows, reach out to them and gain understanding on what they actually do and how it compares to what you think they do.
## 1.0 like you mean it
### 1.0 like you mean it
It's impossible to tell how your project will get to a v1.0, but it's very likely it will do so at some point. This will likely feel very good, but *putting that label onto a piece of software will come with certain expectations*.
@ -110,7 +110,7 @@ If you can embrace v1.0 and all the new requirements it brings, they will allow
---
## How we are going to version Offen
### How we are going to version Offen
Offen's main channel of distribution will be via packaged binary files. Users can run them supervised or unsupervised against a supported set of OSes and database solutions. While we are indeed planning to enable the use Offen's code as the building blocks for other developers to create tailor made, privacy friendly analytics solutions, versioning the code-level interfaces is a non-goal for us at the moment.
@ -123,11 +123,11 @@ Upgrade paths for our users will mostly be bound to the event and key data that
- The `/script.js` URI exposed by the web server is locked so that pages that embed the script can always expect a sensible response. We will try to keep the rest of the exposed routes stable, yet if it helps us improving the product in some way, we will change these too.
- The development setup is kept subject to change at any time. Renaming a `make` target may be annoying to contributors once, but we prefer to keep things lean in this regard, and we hope our contributors will do the same.
### Initial development
#### Initial development
Right now, Offen is still in the stages of initial development. During this period we will *release an alpha version on each milestone* we hit. We invite users to start using Offen by deploying these releases (or by building any revision themselves), but we also need to make sure that while we are still in initial development, we will possibly *introduce breaking changes* or changes that are *hard to upgrade*.
### From v0.1 to v1.0
#### From v0.1 to v1.0
Once all features we deem necessary for Offen to be used in the wild are included, we are planning to continue as following: kicking off, we will release an officially supported *v0.1.0*.
@ -145,6 +145,6 @@ We definitely do invite you to start experimenting with Offen right now and also
---
## Where are we right now?
### Where are we right now?
Laying out detailed plans for the future is one thing, seeing how they came into life and changed is yet another. If you want to see how we managed to translate the plans described above into reality check our [GitHub repository](https://github.com/offen/offen) and the [releases we have done by now](https://github.com/offen/offen/releases).

View File

@ -14,30 +14,30 @@ We finished milestone 2. Here is what we' ve been doing for the last 8 weeks.
---
### Collecting data only with consent
#### Collecting data only with consent
A first approach to one of our major features is implemented. Websites that embed the Offen script now display a user consent banner. In case of user's deny, no other requests than loading the script are made from then on.
[Learn more](https://offen.offen.dev/){: target="_blank" data-button="outline"}
[Learn more](https://offen.offen.dev/){: target="_blank" data-button="outline"}
### Accidental leaks don't expose data
#### Accidental leaks don't expose data
We encrypt all event data before it leaves the browser. [Two types](https://github.com/offen/offen/pull/270){: target="_blank"} of crypto implementations are used for this. This allows us to handle user data from both https and http-only sites securely.
### What exactly happens on your website?
The insight into user behavior has been improved. Still, no sensitive user information is collected. We have added seven additional statistics like Average Page Depth as well as Landing and Exit Pages. Here you find an [overview of all added stats.](https://github.com/offen/offen/pull/270){: target="_blank"}
#### What exactly happens on your website?
The insight into user behavior has been improved. Still, no sensitive user information is collected. We have added seven additional statistics like Average Page Depth as well as Landing and Exit Pages. Here you find an [overview of all added stats.](https://github.com/offen/offen/pull/270){: target="_blank"}
### We are live
#### We are live
The current state of *Offen runs on this domain.* You should have noticed our conset banner by now. Opted in? Head to the [Auditorium](https://offen.offen.dev/auditorium/){: target="_blank"} to manage your data. If not, please have a look at our [Explainer.](https://offen.offen.dev/){: target="_blank"}
*We welcome any feedback* on this key subject. Did our banner text inform you sufficiently? Which issues have been left open? How can we do better? Thanks in advance.
[Send feedback](mailto:hioffen@posteo.de){: target="_blank" data-button="outline"}
[Send feedback](mailto:hioffen@posteo.de){: target="_blank" data-button="outline"}
### Testdrive on your system
#### Testdrive on your system
Whether you are a developer that want to contribute or a website operator that wants to test Offen. Have a demo up and running in no time on your local machine. Download and install a single binary file on Linux, Windows or MacOS.
[Download demo](https://github.com/offen/offen/releases/download/v0.1.0-alpha.2/offen-v0.1.0-alpha.2.tar.gz){: data-button="outline"}
### Feeling adventurous?
#### Feeling adventurous?
Offen is under active development but with the introduction of the user consent banner has become usable for the general public. If you are brave enough you can use our [latest alpha release](https://github.com/offen/offen/releases/latest/){: target="_blank"} in a production environment.
### We need to talk about Safari
#### We need to talk about Safari
Currently, the way we store encryption keys securely on the client side does not work in Apple's Safari browser. Fortunately, our improved opt-in flow will allow us to resume Safari support in milestone 3. Please bear with us until then.
### Up next

View File

@ -22,7 +22,7 @@ Although we have dug very deep, things may still contain issues. Therefore, we r
---
## Offen v0.1.0-alpha.3
### Offen v0.1.0-alpha.3
##### Single binary file for Linux, Windows or MacOS
[Download](https://get.offen.dev/){: data-button="full"}

View File

@ -23,9 +23,9 @@ As always, you can download the latest release from [https://get.offen.dev](http
---
## Achievements
### Achievements
### Improved and annotated Auditorium
#### Improved and annotated Auditorium
The Auditorium is where both users and operators access and manage usage data. Operators want to gain insights in how their services are being used, users want to understand what data Offen is collecting and manage this data.
@ -35,23 +35,23 @@ The user facing Auditorium is now annotated with explanations for each metric an
In addition to that we added new metrics and improved the overall user experience for both users and operators alike. Relevant PRs are [331](https://github.com/offen/offen/pull/331), [328](https://github.com/offen/offen/pull/328), [327](https://github.com/offen/offen/pull/327), [324](https://github.com/offen/offen/pull/324), [319](https://github.com/offen/offen/pull/319), [317](https://github.com/offen/offen/pull/317), [291](https://github.com/offen/offen/pull/291)
### Account Management fundamentals
#### Account Management fundamentals
Operators that are using Offen to improve their services are likely to work in teams. This is why the application needs tools for managing user logins and accounts for segmenting usage data. In a first draft we added basic versions of these features so that the absence of such capabilities doesn't further prevent the adoption of Offen. This initiative has been started in [PR 288](https://github.com/offen/offen/pull/288) and will be refined further during Milestone 4.
### In-Browser setup
#### In-Browser setup
The command line can seem daunting when you don't use it regularly. This is why we added an in-browser setup screen for Offen. Instead of performing the initial setup using the `offen setup` command from the CLI, operators who prefer to do so can now use their browser to navigate to the `/setup` URL of their installation and perform the initial setup there. We hope this helps us gaining further traction with semi-technical users that want to use privacy friendly tools. This has been implemented in [PR 299](https://github.com/offen/offen/pull/299).
<img class="screencast mt3 mb2" alt="browser setup" src="/theme/images/offen-blog-0050-browserSetup.gif"/>
### Goodbye, Choo
#### Goodbye, Choo
We started out with using Choo as our frontend framework and it was a great choice as it allowed us to build dynamic UIs very rapidly. But as Offen's Auditorium was growing over the last few months we noticed its lack of mechanisms for breaking interfaces into components was starting to slow us down significantly and made simple changes cumbersome to implement.
This is why - before starting work on the annotated Auditorium - we migrated the application to use Preact in [PR 289](https://github.com/offen/offen/pull/289). Preact is a great choice as it allows us to use modern paradigms for programming interfaces without having to buy into a Facebook-dominated ecosystem. The library is distributed under a MIT license.
### Signed binary downloads
#### Signed binary downloads
As we start to target more and more distribution channels, ensuring the integrity of what people actually download is very important for an application like Offen. With [PR 338](https://github.com/offen/offen/pull/338) we started signing our binaries with a GPG key. Downloaders can now verify that a binary they are planning to use is the one we intend to distribute:
@ -60,11 +60,11 @@ gpg --keyserver pgp.mit.edu --recv F20D4074068C636D58B53F46FD60FBEDC90B8DA1
gpg --verify offen-linux-amd64.asc offen-linux-amd64
```
### Safari Support
#### Safari Support
Offen generates client side keys for encrypting data for each user. At the end of Milestone 2 we noticed issues where the Safari browser would not store these keys properly which means users would lose access to their user data. We fixed this in [PR 282](https://github.com/offen/offen/pull/282) by adding a fallback mechanism that Safari can use. Keys are guaranteed to be safe from third party access in both implementations.
### 1-Click Deploy
#### 1-Click Deploy
Self hosted software is a great fit for privacy focused software like Offen. Yet, it can seem daunting to non-technical users and make them stick to established SaaS solutions longer than needed. This is why we put a lot of effort into finding easy "1-click" options to deploy an Offen instance. In Milestone 3 we have created a 1-click solution for deploying Offen to Heroku: [https://github.com/offen/heroku](https://github.com/offen/heroku). Using free resources only, people interested in running Offen can now deploy a production ready instance to Heroku in less than 1 minute. We hope this encourages website operator to consider self hosted software and Offen as a real option. Required changes for this were implemented in [PR 287](https://github.com/offen/offen/pull/287).
@ -74,17 +74,17 @@ To offer even more options we are also looking into building a 1-click option fo
---
## Next up
### Next up
Milestone 4 is up next and is called "Managing Data". This means we will focus on features that allow operators and users to manage their usage data and Offen instances.
This is also *where we will have a slight deviation from the original product plan*: We originally had an item called "Selective Data deletion for users", yet as we have moved to focus on self-hosting more and more, this feature does not make too much sense anymore. Instead we will allow users to delete their data tied to an instance entirely and *will make it easy to follow how deletion works and what the implications are*.
### Account management
#### Account management
In addition to the basic account management features Offen already offers, we'll work on implementing more fine grained access control mechanisms so that teams that are using Offen can easily and safely share access to an instance. In addition to that we will also revisit existing features and try to make them easier to use and more accessible.
### Collecting and implementing real world user feedback
#### Collecting and implementing real world user feedback
We are still labeling Offen as `alpha` right now, but we think the next weeks could be the right time to slough that potentially scary label off and attract more users by going `beta`.
@ -92,13 +92,13 @@ Before we do so though, we would like to collect feedback from people that are b
---
## Getting your hands dirty
### Getting your hands dirty
### Installing Offen as a systemd service
#### Installing Offen as a systemd service
We're eager to get people to install Offen and send us their feedback and tell us about their experience, so instead of adding features to the software itself, we will today look at how Offen can be installed on a Linux system that supports `systemd`.
### Download the binary
#### Download the binary
First, download and unpack the tarball containing latest release and verify its signature:
@ -109,7 +109,7 @@ gpg --keyserver pgp.mit.edu --recv F20D4074068C636D58B53F46FD60FBEDC90B8DA1
gpg --verify offen-linux-amd64.asc offen-linux-amd64
```
### Install the binary
#### Install the binary
Next, let's move the downloaded version to `/opt` and create a symlink in `/usr/bin` so the command is available in the system's `PATH`:
@ -128,7 +128,7 @@ $ offen version
INFO[0000] Current build created using revision=v0.1.0-alpha.5
```
### Scaffold the required directories
#### Scaffold the required directories
Offen follows the Linux Filesystem Hierarchy Standard, so next, we need to create the directories for storing data, configuration and certificates:
@ -138,7 +138,7 @@ sudo mkdir -p /var/opt/offen
sudo mkdir -p /var/www/.cache
```
### Creating the service
#### Creating the service
The Offen server needs to be run in a supervised manner so we can be sure it is always responding. `systemd` can do this for us. First we create the service definition:
@ -181,12 +181,12 @@ $ sudo systemctl status offen
└─6701 /usr/bin/offen
```
### Running the in-browser setup
#### Running the in-browser setup
To create the initial account for your Offen install, head to `[localhost:3000/setup](http://localhost:3000/setup)` and fill out the form. After doing so, your Offen instance is ready for local use! If you want to expose this instance to the public internet, [refer to our docs site](https://docs.offen.dev/running-offen/tutorials/configuring-deploying-offen-ubuntu/) for instructions on how to get free automated SSL up and running.
---
## Feedback? Found a bug?
### Feedback? Found a bug?
If you have any feedback, comment or bug report on this milestone release, we'd love to hear from you. [Open an issue](https://github.com/offen/offen/issues) or send us an email at [hioffen@posteo.de.](mailto:hioffen@posteo.de)

View File

@ -25,15 +25,15 @@ As always, you can download the latest release from [https://get.offen.dev](http
---
## Achievements
### Achievements
### Full fledged account management
#### Full fledged account management
Account management for users has been a part of Offen for a while, but in this Milestone we took the time to bring it to a level that it satisfies the needs of real world teams. There are now read-only users, fine-grained controls for sharing access and other management options. We are now looking for feedback in how this works out for setups like smaller dev shops or agencies.
Relevant PRs are: [349](https://github.com/offen/offen/pull/349), [355](https://github.com/offen/offen/pull/355)
### Integration test setup
#### Integration test setup
In Milestone 5, we want to add integration test coverage for all of our user-facing features. To prepare for this, we did research on what tools we can use and how to integrate them into our existing development and CI setup.
@ -43,7 +43,7 @@ Another great thing about this setup is that is allows us to run automated Acces
This has been implemented in PRs [362](https://github.com/offen/offen/pull/362), [365](https://github.com/offen/offen/pull/365) and [368](https://github.com/offen/offen/pull/368)
### Improved demo
#### Improved demo
For self hosted software like Offen, giving potential users an idea of what the software looks like without having to do a proper install. Many softwares do this by sharing the credentials for a demo account on their website, but in the case of Offen we do not want to do this as it would expose the usage data of our real world users - which is what we are trying to protect with Offen.
@ -62,7 +62,7 @@ curl https://demo.offen.dev | bash
Relevant PRs are: [367](https://github.com/offen/offen/pull/367), [346](https://github.com/offen/offen/pull/346), [347](https://github.com/offen/offen/pull/347)
### UX and stats improvements
#### UX and stats improvements
An ongoing part of our work on Offen is implementing features and fixes that come from our own experience with running our own Offen instance. This is why Milestone 4 contains a few UX improvements and fixes regarding the operator facing Auditorium. Among others, we improved the referrer stats, improved the mobile UX for tabular data and fixed issues with the user flow for resetting your password.
@ -70,35 +70,35 @@ Relevant PRs are [361](https://github.com/offen/offen/pull/361), [363](https://g
---
## Next up
### Next up
### Accessibility Audit
#### Accessibility Audit
This week already we will have an Accessibility Audit by Stichting Accessibility. We look forward to implementing the feedback we receive and making Offen accessible for all users.
Where possible we will also combine these changes with the backlog of UX improvements we are planning to implement in any case.
### Security Audit
#### Security Audit
Securing user data is a key aspect of Offen, so it's important to make sure we did not accidentally leave any unwanted loopholes in our system architecture. This is why Milestone 5 also includes a Security Audit by "Radically Open Security". We'll look for proper use of cryptography and a hardened HTTP interface for the server specifically, but if we can pick up other improvements along the way we won't hesitate to implement these.
### Integration Test coverage
#### Integration Test coverage
Now that we have built a solid foundation for Offen, we want the public to be able to hack on and participate in the development of Offen. To make sure this is a safe and enjoyable journey, we'll add comprehensive integration test coverage for all major user stories there are so that we can always be sure the software keeps working as intended when we review and merge patches and features by others (and ourselves of course).
### Getting ready for external contributions
#### Getting ready for external contributions
Closely related to the above, we will also do a thorough check to make sure Offen is ready for external contributions. Is documentation up to date? Does our development setup work reliably across different OSes and hardware? Is it easy to open an issue and get in touch with us? We're definitely looking forward to having the community become a part of our efforts.
---
## Getting your hands dirty
### Getting your hands dirty
### Adding an integration test
#### Adding an integration test
Offen tries to be a slim and lightweight solution but nevertheless, crucial user flows can break unexpectedly and cause frustration for users, operators and developers alike. To prevent such breakages we'll focus on adding integration tests in the next milestone. In case you're curious, why not have a peek at what this looks like right now?
### Testing Opt-In and Opt-Out in the context of the Auditorium
#### Testing Opt-In and Opt-Out in the context of the Auditorium
Offen collects data only after opt-in. In addition to the consent banner that is shown on websites that embed Offen, the Auditorium itself allows users to manage their consent status. As an exercise, let's write a test where a user first grants consent, reviews the Auditorium and then opts out again, seeing that data has been deleted.
@ -166,6 +166,6 @@ Of course, there are a lot of other cases to cover for this feature, but you pro
---
## Feedback? Found a bug?
### Feedback? Found a bug?
If you have any feedback, comment or bug report on this milestone release, we'd love to hear from you. [Open an issue](https://github.com/offen/offen/issues) or send us an email at [hioffen@posteo.de.](mailto:hioffen@posteo.de)

View File

@ -19,11 +19,11 @@ In this article we collect a few real world options and scenarios for hosting Of
*Prerequisite:* All of the below assumes you have registered one or multiple domains on which you run your applications and websites, and can set [A](https://en.wikipedia.org/wiki/List_of_DNS_record_types#A){: target="_blank"} or [CNAME records](https://en.wikipedia.org/wiki/CNAME_record){: target="_blank"} for these. If you do not know what this means exactly: it is a default feature in almost all packages that let you register a domain. Your provider or registrar surely can help you with further support if you need any. Read more about it in our [dedicated subdomain tutorial.](https://docs.offen.dev/running-offen/setting-up-using-subdomains/){: target="_blank"}
## Scenarios where Offen is a good fit
### Scenarios where Offen is a good fit
Offen is designed to be lightweight and easy to install. It's probably not a good fit if you need advanced features like interaction heatmaps or tracking the funneling of users across multiple sites, but if you want a lean way of knowing how people use your website without invading your user's privacy, Offen is a solid choice.
### *Handling multiple low-ish traffic sites on a single instance*
#### *Handling multiple low-ish traffic sites on a single instance*
One scenario we are targeting is deploying an Offen instance and using it for analyzing multiple low traffic sites (like for example blogs or side projects). Offen allows you to create as many accounts as you like, so you can have one bucket per each of these projects that you want to run analytics on.
@ -31,17 +31,17 @@ It is also important to understand that even if these projects are run on differ
As for data storage, you will likely want to use the default SQLite option in this scenario which stores data in a file on the host system.
### *Handling a single high traffic site*
#### *Handling a single high traffic site*
If you are working on a bigger project with a lot of traffic, you might consider deploying a single instance for that project only. Also, this is a scenario where we would recommend using a dedicated database server instead of using a local SQLite file, as it would allow you to scale Offen further while your traffic grows.
---
## Some available hosting providers
### Some available hosting providers
This list is a non-exhaustive collection of hosting providers that we happen to know and have used ourselves. We are in no way affiliated with any of these, don't earn any money when you install Offen there, and definitely don't want to push you anywhere. We do want you to use Offen though, of course, but it's always your choice where to run it. If you know of any other good option, tweet them our way [@hioffen](https://twitter.com/hioffen){: target="_blank"}.
### [AWS](https://aws.amazon.com/){: target="_blank"}
#### [AWS](https://aws.amazon.com/){: target="_blank"}
The obvious choice for hosting your Offen instance in the AWS ecosystem is probably using EC2 (which is a virtual server). For handling Offen in any of the above scenarios a `t3.nano` instance is sufficient, which - at the time of writing - bills at *USD 3.90 per month*. In case you have just recently signed up for AWS, you could also run Offen using the *free tier usage plan* that gives you one free `t2.micro` (this, by the way, is also how we are currently running our own instance).
@ -56,7 +56,7 @@ The lowdown on AWS:
---
### [Heroku](https://www.heroku.com/){: target="_blank"}
#### [Heroku](https://www.heroku.com/){: target="_blank"}
Heroku is famous for making deployment of web based software as easy as possible, and it indeed lets you deploy Offen from within your browser using our Heroku preset.
@ -76,7 +76,7 @@ The lowdown on Heroku:
---
### [DigitalOcean](https://www.digitalocean.com/){: target="_blank"}
#### [DigitalOcean](https://www.digitalocean.com/){: target="_blank"}
DigitalOcean provides virtual servers in a product they call Droplets. The cheapest variant - which is enough to host Offen for one of the above scenarios - costs *USD 5.00 per month*. On this droplet you can install Offen yourself in whatever fashion you prefer (Docker, systemd, something else) or use our prebuilt image.
@ -93,7 +93,7 @@ The lowdown on DigitalOcean:
---
### [Linode](https://www.linode.com/){: target="_blank"}
#### [Linode](https://www.linode.com/){: target="_blank"}
Feeling "close to the metal" in a good way, Linode offers virtual servers on shared instances. At *USD 5.00 per month* you get a Linux server that you can use to install and serve your Offen instance. There is no dedicated database offering, so if you wanted to use a dedicated database you would need to install MySQL or PostgreSQL on another shared instance. Presets are available for these.
@ -106,6 +106,6 @@ The lowdown on Linode:
---
## Where to head next
### Where to head next
If you made a choice and want to deploy your own Offen instance, head over to our [Installation tutorials](https://docs.offen.dev/running-offen/tutorials/){: target="_blank"} where you will get further guidance on what to do next and how to get your instance up and running. And in case you get stuck or need help, file an [issue](https://github.com/offen/offen/issues){: target="_blank"}, [tweet](https://twitter.com/hioffen){: target="_blank"} or [email](mailto:hioffen@posteo.de){: target="_blank"}.

View File

@ -23,21 +23,21 @@ As always, you can download the latest release from [get.offen.dev](https://get.
---
## Achievements
### Achievements
### Accessibility Audit
#### Accessibility Audit
As an NGI Zero project we are lucky enough to have great people in our network by default. This time Stichting Accessibility helped us with an A11y audit of Offen. This audit resulted in helpful feedback and action points for us to improve upon the A11y aspects of the Offen Auditorium and make Offen an analytics tool for everyone.
Relevant PRs are: [386](https://github.com/offen/offen/pull/386), [387](https://github.com/offen/offen/pull/387), [389](https://github.com/offen/offen/pull/389), [393](https://github.com/offen/offen/pull/393)
### Security Audit
#### Security Audit
Another really helpful experience was having Offen audited from a security perspective by the wonderful people from Radically Open Security. We had a great time looking at Offen together, checking for exploits, leaky crypto, security issues and discussing general design questions that came up while working on Offen. We did not find major flaws, but instead came up with a couple of very good ideas about how to make Offen more secure and harden the server even further. These have been implemented by now and are included in the latest release, so make sure to update.
Relevant PRs are: [399](https://github.com/offen/offen/pull/399), [400](https://github.com/offen/offen/pull/400), [401](https://github.com/offen/offen/pull/401), [405](https://github.com/offen/offen/pull/405), [406](https://github.com/offen/offen/pull/406)
### Community approved handling of licensing
#### Community approved handling of licensing
With help from the FSFE, we adopted [REUSE](https://reuse.software/){: target="_blank"}, a standard and tooling around the handling of licensing in non-small repositories. Having integrated a dedicated check for REUSE compliance into our CI pipeline allows us to stop worrying we have forgotten something, and will give everyone access to all licensing information needed to use or reuse Offen in all scenarios.
@ -45,13 +45,13 @@ In addition to that we now also automatically generate a NOTICE file from our de
Relevant PRs are: [383](https://github.com/offen/offen/pull/388), [414](https://github.com/offen/offen/pull/414), [415](https://github.com/offen/offen/pull/415)
### Integration tests
#### Integration tests
Putting more effort into an ongoing effort, we added more integration tests using the setup from Milestone 4. We now cover users and operators, so we'll hopefully ship fewer and fewer regressions with each test added. Also, we now run integration tests against all supported database backends (SQLite, MySQL, Postgres) so we can be sure all installation methods are always considered.
Relevant PRs are: [395](https://github.com/offen/offen/pull/395), [413](https://github.com/offen/offen/pull/413), [394](https://github.com/offen/offen/pull/394)
### Improved documentation
#### Improved documentation
Improving our documentation has been an important part of this milestone as it means our move to a non-alpha version is supported by making Offen even more accessible to developers and operator that want to install Offen or hack on it.
@ -61,17 +61,17 @@ Relevant PRs are: [392](https://github.com/offen/offen/pull/392), [396](https://
---
## Next up
### Next up
### More deployment targets and tests
#### More deployment targets and tests
Offen's deployment story as a single binary file and no external database required is relatively easy, yet there is always room to improve, especially for a non-technical audience. While we already have tested installing Offen successfully on a multitude of providers, ranging from industry leaders like AWS to offbeat offerings like Uberspace, we want to look into more options. While doing so we will share our findings with the public so they can use our experience when installing Offen themselves. We will also look into how we can make running Offen even easier. Maybe this one configuration value isn't even needed. Maybe creating your first account can be even easier. Let's find out.
### Reaching out to the community
#### Reaching out to the community
When the last months it has been the two of us working on Offen exclusively, moving into Beta is a good time to get the community involved. We want to know where our users would like to see us heading, and when want to know how we can make Offen more accessible for external contributors. Now that we have defined the foundation, Offen can serve the community better the more that it's a community effort.
### Defining where we want to head next
#### Defining where we want to head next
Upcoming Milestone 6 will be the last one in our current funding round by NGI Zero PET. It's been an incredibly supportive and inspiring journey which taught us a lot, one thing being that we are onto something with Offen.
@ -81,9 +81,9 @@ Once this is defined, we will apply for new funds. Let us know if you know of an
---
## Getting your hands dirty
### Getting your hands dirty
### Load testing the hardened Offen server
#### Load testing the hardened Offen server
An important part of Milestone 5 was hardening the HTTP interface of Offen, which in most cases will be exposed to the internet directly, without any reverse proxy or similar in front. So why not do a load test and see how far we can take it?
@ -141,7 +141,7 @@ Now, let's try doing something more interesting: trying to flood the login endpo
Now, we can run the actual test:
```
$ echo "POST http://localhost:40125/api/login" | vegeta attack -body=login.json -duration=5s | vegeta report
$ echo "POST http://localhost:40125/api/login" | vegeta attack -body=login.json -duration=5s | vegeta report
Requests [total, rate, throughput] 250, 50.20, 0.00
Duration [total, attack, wait] 29.095s, 4.98s, 24.115s
@ -164,6 +164,6 @@ Load testing gets even more interesting when you look at sending events. If you
---
## Feedback? Found a bug?
### Feedback? Found a bug?
If you have any feedback, comment or bug report on this milestone release, we'd love to hear from you. [Open an issue](https://github.com/offen/offen/issues) or send us an email at [hioffen@posteo.de.](mailto:hioffen@posteo.de)

View File

@ -10,7 +10,7 @@ bottom_cta: fair
# Why Offen is a valid Matomo alternative
### Matomo at a glance
#### Matomo at a glance
Matomo was started around 2007 as a successor to phpMyVisites and *open-source alternative to Google Analytics.* The project founded by Matthieu Aubry used to be called Piwik until it was rebranded to its current name in 2018. According to Wikipedia it is installed on about 1.5 million websites, making it one of the best known open source web analytics applications on the market.
@ -24,7 +24,7 @@ On the technical side, the following issues are particularly apparent. Installin
---
## Operators and users as equal parties
### Operators and users as equal parties
To address the above mentioned issues we develop a fair and lightweigt web analytics tool that treats operators and users as equal parties. It is called Offen and is [available as a beta version.](https://www.offen.dev/get-started/)

View File

@ -26,9 +26,9 @@ As always, you can download the latest release from [https://get.offen.dev](http
---
## Achievements
### Achievements
### Offen runs almost everywhere
#### Offen runs almost everywhere
One of the design goals of Offen is to make it really easy to install. Nevertheless, using self hosted software can be daunting if you haven't done it before, or you are not well versed with using the CLI. To help people unsure about what to do getting started, we published a lot of options and contributed to community resources:
@ -48,7 +48,7 @@ One of the design goals of Offen is to make it really easy to install. Neverthel
In case you know of another great target for installing Offen, let us know and we'll check out the option right away.
### deb package for easier setup
#### deb package for easier setup
Installing Offen from our binary distributions hasn't been too complicated already, but starting with version 0.1.6 we now also ship Offen as a `deb` package. This means, installation on Ubuntu or Debian servers is now as easy as:
@ -61,43 +61,43 @@ sudo systemctl start offen
We also updated our [installation tutorials](https://docs.offen.dev/running-offen/tutorials/) to reflect this. Packaging code lives in the [offen/deb](https://github.com/offen/deb) repository. A nice side effect of this is that we'd be pretty much ready to set up a repository for people to install Offen using the `apt` package manager in case this is requested.
### Helping others to install and run Offen
#### Helping others to install and run Offen
While we've been doing a lot of test installations of Offen ourselves in the past weeks, we've also seen others starting to install of Offen. We've seen some expected teething troubles we've fixed along the way, but more importantly we've gained further insights on how people deploy and use Offen, allowing us to further optimize for the relevant use cases.
### Helping others to start contributing to Offen
#### Helping others to start contributing to Offen
Offen is free and open for everyone to use with no strigs attached. There is no business model like a hosted version or similar behind it. This is why it's important for us to open up the development of Offen to the community now that we've set the foundation. To kick this off, we will be participating in this year's [Hacktoberfest](https://hacktoberfest.digitalocean.com/){: target="_blank"}. Check out the [relevant issues on our repository](https://github.com/offen/offen/issues?q=is%3Aissue+is%3Aopen+label%3AHacktoberfest), forward this to whoever might be interested, or start hacking on Offen yourself right away. We are also happy about any kind of feedback on our [roadmap](https://github.com/offen/offen/projects/1).
---
## Next up
### Next up
### Spreading the word
#### Spreading the word
We've built a unique analytics software, and we sense the time is just about right for shifting paradigms when it comes to collecting and handling data. However, if noone knows about Offen, noone can use it. Now that we have a working beta, we can start marketing Offen more aggressively all across the internet. If you have ideas for a good fit in terms of audience, let us know.
### Performance improvements
#### Performance improvements
Securing the data collected as much as possible has always been (and will always stay) the most important aspect when developing Offen. This makes having Offen perform well on large datasets (i.e. sites with a lot of traffic) is hard. While it's already usable in these scenarios - and it's an obvious tradeoff where we have a clear priority - there is still room for improvement.
This is why we'd like to look into ways of making Offen faster while still satisfying the strict privacy and security requirements we have. Check [this issue](https://github.com/offen/offen/issues/448) for ideas about how we plan to implement this.
### Defining the future of Offen
#### Defining the future of Offen
This post is closing Milestone 6 out of 6. This means we have successfully built and shipped a working beta version of Offen. It also means it's up to us to define what we want to do next.
The obvious path is further extending and maintaining Offen, which we will continue to do. Yet, we'd also like to work on ideas about how we can make the tech, and also the ethical principles that Offen is built upon available to the public. In the end, Offen is a lot more than just an analytics tool.
### Adding a second locale
#### Adding a second locale
Localizing software at an early stage is hard, so we developed Offen as English-only up until now. Luckily, we already placed all the hooks need for localizing Offen in our codebase. Now that Offen has become more stable and mature, we think it's a good time to start adding a second locale. In our case, German is the obvious choice, so we are planning to make Offen available in German as well in the next months. If you're interested in helping us localize Offen in the language of your choice, we'd be happy to hear from you [in the corresponding issue on GitHub](https://github.com/offen/offen/issues/453). Vielen Dank.
---
## Getting your hands dirty
### Getting your hands dirty
### Packaging Offen as a snap
#### Packaging Offen as a snap
[Snapcraft](https://snapcraft.io/){: target="_blank"} is a relatively recent way of packaging apps for use across all Linux distributions. While it has also received its fair share of criticism, it also provides a really simple way of packaging and distributing apps like Offen.
@ -177,6 +177,6 @@ And that's it, your system is now ready to use Offen, but more importantly, this
---
## Feedback? Found a bug?
### Feedback? Found a bug?
If you have any feedback, comment or bug report on this milestone release, we'd love to hear from you. [Open an issue](https://github.com/offen/offen/issues) or send us an email at [hioffen@posteo.de.](mailto:hioffen@posteo.de)

View File

@ -28,41 +28,41 @@ As usual, you can download the latest release from [https://get.offen.dev](https
---
## Achievements
### Achievements
### Faster queries
#### Faster queries
By adding an aggregate cache, we were able to significantly improve query performance in the Auditorium. This is quite noticeable when analyzing many data points over extended time frames. On desktop computers with current browsers, we were able to cut query times by up to two-thirds.
### A better Auditorium
#### A better Auditorium
Before we will tackle some major UX updates that will primarily benefit the operators, we first took a closer look at the user side. Users' access to their data is one of our key features. However, the feedback we have collected so far has shown us that the context and functionality presented in the Auditorium is not instantly clear to some users. To address this, there now is an onboarding feature for the first-time user when visiting the Auditorium. Here, in addition to a short insight into the data just collected, the basic functionality of Offen is pointed out once again. Moreover, as little extras, there is now an empty state illustration on the user side and a loading state animation for all to enjoy.
### Tagging campaigns and sources
#### Tagging campaigns and sources
As we want to give website operators a fair and professional web analytics alternative, we integrated a UTM feature at an early stage. This feature allows you to add special tags to your URLs, which will be displayed separately in the Auditorium. Now, you can find details about the functionality and tips on how to use it [in our Docs.](https://docs.offen.dev/running-offen/campaigns-sources/)
### Migrate an instance to different hardware
#### Migrate an instance to different hardware
For operators who want to migrate an older running Offen instance to another hardware, there is now an important bugfix to pay attention to. If you find yourself affected by issues, check our [detailed workarround.](https://docs.offen.dev/running-offen/known-issues/)
---
## Next up
### Next up
### Localization
#### Localization
As already mentioned in our last milestone, localization ranks at the top of our bucket list. Thanks to the kind support of the folks at [POEditor](https://poeditor.com/){: target="_blank"}, we now have a proper workflow in place and the translation may begin. Not surprisingly, German will be the second locale we tackle. Let us know if you can you help us out with French, Spanish or any other mother tongue.
### Easily accessible analytics data
#### Easily accessible analytics data
For Offen to be a fully competitive analytics tool, some significant UX improvements are missing. To make the analytics data more accessible, we will add two elements for operators and users: A sophisticated selection of date ranges, which is easy to use even on mobile devices, and a flexible drill-down workflow, which provides a better insight into cohorts.
### Once again, awareness
#### Once again, awareness
We want to give operators a range of possibilities to insert ready-made elements on their website that make users aware of how to access their data. These and all existing consent elements will be made customizable in their design to make it less painful for operators to insert them.
### Expanding the idea underlying Offen
#### Expanding the idea underlying Offen
Over the last year we have developed a fair, open and lightweigt web analytics tool that treats operators and users as equal parties. We like to describe the basic idea behind Offen with the concept of fair data transfer.
@ -70,7 +70,7 @@ Taking this concept seriously, it cannot be limited to a single software project
---
## Happy to hear from you
### Happy to hear from you
Are you using Offen? We're happy to feature you in this [README.](https://github.com/offen/offen/blob/development/README.md) Send a PR adding your site or app to [this](https://github.com/offen/offen/blob/development/README.md#whos-using-offen) section.

View File

@ -9,7 +9,7 @@ author: Frederik Ring
must_read: True
bottom_cta: quality
## Privacy focus? Consider the cookie
# Privacy focus? Consider the cookie
Whoever [drafted the idea for HTTP cookies](https://tools.ietf.org/html/rfc2109){: target="_blank"} back in 1997 likely did not anticipate having created a technology that is as disputed, discussed and also disliked as it is today. A non-technical user of the internet might be under the impression that cookies are an utterly useless privacy disaster that bring you nothing but consent banners filled with dark patterns, and enable advertisers to track you on literally every website ever.

View File

@ -25,9 +25,9 @@ As usual, you can download the latest release from [https://get.offen.dev](https
---
## Achievements
### Achievements
### Localize it
#### Localize it
Offen is now also available in English and German. Our consent banner and the Auditorium for operators as well as users can be displayed in the respective locale.
@ -35,13 +35,13 @@ To run Offen in a non-default locale, you need to set `OFFEN_APP_LOCALE` to the
Our translation workflow featuring [POEditor](https://poeditor.com){: target="_blank"} is up and running and ready to be applied to other languages. A further locale, Indonesian, is currently in the works. If you want to support fair web analytics by contributing French, Spanish or other language versions, don't hesitate to [request an invite.](mailto:hioffen@posteo.de)
### About time
#### About time
In order to evolve Offen into a fully competitive analytics tool, we still have some significant UX improvements in mind. Over the last few weeks, we have implemented one of them.
Now you can easily display custom intervals of the existing data. Furthermore, we have revised the selection of standard time periods. As always, we are happy to hear feedback on its usability from you.
### Experimental JS API
#### Experimental JS API
For all of you who would like to have a little more precision in the way user consent is exercised, we have good news.
@ -49,17 +49,17 @@ Offen automatically acquires a user consent decision and collect pageviews in ca
---
## Next up
### Next up
### Cohorts
#### Cohorts
In the UX realm, we will next be dealing with cohorts. We plan to add a flexible drill-down workflow to the Auditorium that will provide better insight into the performance of data subsets. This will allow operators to compare user subgroups with each other, e.g. how page depth behaves depending on the refferer.
### Views
#### Views
We will also further optimize the general display options and bring them closer to real-world workflows. We aim to display more functions above the fold on desktop devices and to optimise for clarity on mobile devices.
### Reach out
#### Reach out
We have already made progress in terms of the visibility of our project in the relevant public sphere. Nevertheless, there is still a lot to be done. As we did at the beginning of last year, we will again directly address stakeholders in the privacy field and try to draw their attention to our fair approach to web analytics.
@ -67,7 +67,7 @@ You got someone in mind we should urgently talk to? [Let us know.](mailto:hioffe
---
## Already using Offen?
### Already using Offen?
We're happy to feature your project in our GitHub [README.](https://github.com/offen/offen/blob/development/README.md) Send a PR adding your site or app to [this](https://github.com/offen/offen/blob/development/README.md#whos-using-offen) section.

View File

@ -8,7 +8,7 @@ image_url: /theme/images/offen-blog-0160-our-story-so-far.jpg
author: Hendrik Niefeld
bottom_cta: cookie
## Our story so far
# Our story so far
Hi there. This is our story on how we develop fair and open source web analytics software. A note first. This story is not finished yet. We are just about to take the next major step. But more about that later.

View File

@ -3,7 +3,7 @@ description: Who we are, what we do, who supports us and how you can can get in
slug: about
bottom_cta: fair
## About
# About
### What is this thing called "my data" and why does seemingly everyone want to get hold of it?

View File

@ -1,5 +1,5 @@
title: Fair web analytics | Offen
description: Offen is an open alternative to common web analytics tools. Gain insights while your users have full access to their data. Lightweight, self hosted and free.
description: Let your users access their data. Gain valuable insights at the same time. Open, lightweight, self hosted and free.
save_as: index.html
template: index
sitemap_priority: 1.0

View File

@ -4,7 +4,7 @@ slug: legal-privacy
exclude_from_sitemap: true
bottom_cta: quality
## Legal & Privacy
# Legal & Privacy
### Website Analytics
We use [Offen](https://offen.offen.dev/) for collecting usage data on this website and only access your usage data with your consent. Your data always remains yours. You can review and delete it at any time. Opt out again whenever you want.

View File

@ -4,7 +4,9 @@ slug: try-demo
template: trydemo
sitemap_priority: 0.1
Offen always respects your data, which is why *we don't offer a live demo showing you data of real users.* However, it's really easy to get a demo that is populated with random usage data up and running on your system. If you get stuck or need help, [file an issue][gh-issues], [tweet (@hioffen)][twitter]{: target="_blank"} or [email][email].
Offen always respects your data, which is why *we don't offer a live demo showing you data of real users.* However, it's really easy to get a demo that is populated with random usage data up and running on your system.
If you get stuck or need help, [file an issue][gh-issues], [tweet (@hioffen)][twitter]{: target="_blank"} or [email][email].
[gh-issues]: https://github.com/offen/offen/issues
[twitter]: https://twitter.com/hioffen

View File

@ -75,8 +75,8 @@ DECORATE_CONTENT = {
'li a': ['link', 'b', 'dim'],
'a:not([data-button])': ['gray'],
'h1': ['f2', 'normal', 'lh-title', 'mt3', 'ma0', 'mb3'],
'h2': ['f25', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3'],
'h3': ['f4', 'normal', 'mt5', 'ma0', 'mb3'],
'h2': ['f2', 'normal', 'lh-title', 'mt4', 'ma0', 'mb3'],
'h3': ['f3', 'normal', 'mt5', 'ma0', 'mb3'],
'h4': ['f5', 'normal', 'mt4', 'ma0', 'mb3'],
'h5': ['f5', 'normal', 'mt5', 'ma0', 'mb1'], # text over button
'h6': ['f5', 'lh-solid', 'normal', 'ma0', 'light-silver'], # not used

View File

@ -288,31 +288,31 @@ body {
}
}
/* Custom Tachyons class */
.f25 {
.fLogo {
font-size: 1.9rem;
}
.f26 {
font-size: 1.9rem;
}
@media only screen and (min-width: 30em) {
.f26 {
font-size: 2.25rem;
}
}
@media only screen and (min-width: 60em) {
.f26 {
font-size: 1.9rem;
}
}
span {
display: table;
}
/* Custom media query - medium small - neutralize span line braks */
@media only screen and (max-width: 34em) {
@media only screen and (max-width: 40em) {
p span {
display: initial;
}
}
.pitchMargin {
margin-right: 2rem;
}
@media only screen and (min-width: 25em) and (max-width: 30em) {
.pitchMargin {
margin-right: 3rem;
}
}
@media only screen and (min-width: 30em) {
.pitchMargin {
margin-right: 0;
}
}
em {
background: linear-gradient(transparent 66%, #fde28c 66%);
font-style: normal;

View File

@ -10,9 +10,9 @@
{% block content %}
<div class="mw8 center cclr-bg-white-responsive mt5-ns">
<div class="dib gray bg-white ph3 ph5-ns pt5">
<h2 class="f25 normal lh-title ma0 mt4 mb3">
<h1 class="f2 normal lh-title ma0 mt3 mb3">
Fair Analytics Blog
</h2>
</h1>
<div class="w-75-l">
<p class="ma0 mb5">
Hi there. We are Frederik and Hendrik. Here we post about how we are building a fair and open web analytics tool and what we discovered along the way.
@ -33,7 +33,7 @@
<h6 class="f5 lh-solid normal ma0 light-silver">
{{ article.date | strftime('%d %b %Y') }}{% if article.modified %}(article.updated {{ article.modified | strftime('%d %b %Y') }}){% endif %}, {{ article.author }}
</h6>
<h1 class="f26 normal lh-title mt3 ma0 mb3 light-silver">
<h2 class="f3 normal lh-title mt3 ma0 mb3 light-silver">
{% if not article.must_read %}
<a href="/blog/{{ article.slug }}/" class="link b dim gray">{{ article.title }}</a>
{% else %}
@ -41,7 +41,7 @@
<a href="/blog/{{ article.slug }}/" class="link b dim gray">{{ article.title }}</a>
</em>
{% endif %}
</h1>
</h2>
<p>
{{ article.description }} <a href="/blog/{{ article.slug }}/" class="link b dim gray">Read more</a>
</p>

View File

@ -43,7 +43,9 @@
<div class="nav-container">
<div class="icon flex">
<a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
<a class="link dim" href="/"><p class="f25 normal ma0 ml2 white">Offen</p></a>
<header>
<a class="link dim" href="/"><p class="fLogo normal ma0 ml2 white">Offen</p></a>
</header>
</div>
{% if not funnel %}
<nav>
@ -111,7 +113,7 @@
{% if bottom_cta == 'index' %}
<div class="flex flex-wrap justify-center tc ph3 pv5">
<div class="ph4-ns cclr-bg-yellow-mid">
<h2 class="f26 ma0 mb3 lh-title">
<h2 class="f3 ma0 mb3 lh-title">
<a class="b link dim cclr-fnt-black-mid" href="/">How do fair web analytics work?</a>
</h2>
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/" rel="noopener">Open summary</a>
@ -122,7 +124,7 @@
{% if bottom_cta == 'blog' %}
<div class="flex flex-wrap justify-center tc ph3 pv5">
<div class="ph4-ns cclr-bg-yellow-mid">
<h2 class="f26 ma0 mb3 lh-title">
<h2 class="f3 ma0 mb3 lh-title">
<a class="b link dim cclr-fnt-black-mid" href="/blog/">Continue reading</a>
</h2>
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/blog/" rel="noopener">See all blog posts</a>
@ -132,7 +134,7 @@
{% if bottom_cta == 'cookie' %}
<div class="ph3 ph0-m pv5">
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
Also on our blog
</h2>
<div class="mw7 center flex flex-wrap ph5-ns">
@ -159,7 +161,7 @@
{% if bottom_cta == 'quality' %}
<div class="ph3 ph0-m pv5">
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
Also on our blog
</h2>
<div class="mw7 center flex flex-wrap ph5-ns">
@ -186,7 +188,7 @@
{% if bottom_cta == 'matomo' %}
<div class="ph3 ph0-m pv5">
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
Also on our blog
</h2>
<div class="mw7 center flex flex-wrap ph5-ns">
@ -213,7 +215,7 @@
{% if bottom_cta == 'fair' %}
<div class="ph3 ph0-m pv5">
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
Also on our blog
</h2>
<div class="mw7 center flex flex-wrap ph5-ns">
@ -240,7 +242,7 @@
{% if bottom_cta == 'budget' %}
<div class="ph3 ph0-m pv5">
<h2 class="f26 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
<h2 class="f3 normal tc lh-title ma0 mb4 cclr-bg-yellow-mid">
Also on our blog
</h2>
<div class="mw7 center flex flex-wrap ph5-ns">

View File

@ -3,13 +3,13 @@
{% block content %}
<div class="w-100 mt5-ns cclr-bg-white-dark">
<div class="mw7 center pt5 pb5 ph4 bg-white">
<div class="mw7 center pt5 pb5 ph4 gray bg-white">
<div class="w-100 center tc">
<h2 class="f1-ns f2 normal ma0 mb4">
<h1 class="f2 normal ma0 mt3 mb4">
Get started
</h2>
</h1>
<div class="gray tl">
{{ page.content }}
</div>
@ -44,7 +44,7 @@
<hr class="ma0 mb5 b--black-05">
<h3 class="f25 normal ma0 mb5">
<h3 class="f3 normal ma0 mb5">
Read the docs
</h3>
<div class="flex flex-column items-center">

View File

@ -4,7 +4,7 @@
{% block content %}
<div class="w-100 mt5-ns cclr-bg-yellow-mid">
<div class="mw8 center">
<div class="flex justify-center pt4 ph4">
<div class="flex justify-center ph4">
<div class="dn db-ns w-20 tr pr3 pb3">
<img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="58" height="63">
</div>
@ -20,10 +20,10 @@
<h1 class="f1-ns f2 normal lh-solid ma0 mb3">
Fair web analytics
</h1>
<p class="ma0 mb4">
Offen is an open alternative to common web analytics tools. <span>Gain insights while your users have full access to their data. </span>Lightweight, self hosted and free.
<p class="f3 lh-title ma0 mb4 pitchMargin">
Let your users access their data. <span>Gain valuable insights at the same time. </span>Open, lightweight, self hosted and free.
</p>
<div class="pb5 mb2">
<div class="pb5">
<a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="#bg-explainer" rel="noopener">Learn more</a>
</div>
</div>
@ -48,11 +48,11 @@
<h2 class="f2 normal lh-solid ma0 mb3 pt5">
<em class="em-mint-1">
Open & free
Secure & free
</em>
</h2>
<p class="wx18 center ma0">
<i>Our</i> lightweight <i>and</i> open source code <i>can be fully audited by the community. Offen will always be</i> available for free.
<i>Our code is </i>open source.<i> All user data is </i>encrypted end-to-end.<i> Offen will always be available for </i>free.
</p>
</div>
@ -67,7 +67,7 @@
</em>
</h2>
<p class="wx18 center ma0">
Comply with GDPR <i>guidelines. Don't share data with third parties. Your</i> users have full access <i>to their data.</i>
Comply with GDPR<i> guidelines. </i>No ads, no third parties<i> involved. Offen uses </i>first-party cookies only.
</p>
</div>
@ -85,11 +85,11 @@
<div>
<h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
<em class="em-mint-1">
Fair & secure
Fair & by choice
</em>
</h2>
<p class="wx18 center ma0">
Opt-in only. <i>Users must actively give their consent to data collection. All data is</i> encrypted end-to-end.
Opt-in only.<i> Users must actively give their </i>consent<i> to data collection. They have full </i>access to<i> their </i>data.
</p>
</div>
@ -125,7 +125,7 @@
<div class="w-100 dib bg-white">
<div class="tc mh4">
<p class="f1-ns f2 lh-solid ma0 mt6">
Gain insights in an ethical way
Insights in an ethical way
</p>
<div class="mw7 center">
<p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l">
@ -151,7 +151,7 @@
</div>
</div>
<p class="f25 lh-solid ma0 mt6 mb3">
<p class="f3 lh-solid ma0 mt6 mb3">
Your job
</p>
</div>
@ -193,7 +193,7 @@
<div class="w-100 dib cclr-bg-mint-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb3">
<p class="f3 lh-solid ma0 mt5 mb3">
Benefits for your users
</p>
</div>
@ -240,7 +240,7 @@
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4">
<p class="f3 lh-solid ma0 mt5 mb4">
<em>
What you see
</em>
@ -261,13 +261,13 @@
</div>
</div>
<p class="f25 lh-solid ma0 mb2">
<p class="f3 lh-solid ma0 mb2">
859
</p>
<p class="f7 lh-solid ma0 mb4">
Unique users
</p>
<p class="f25 lh-solid ma0 mb2">
<p class="f3 lh-solid ma0 mb2">
3.372
</p>
<p class="f7 lh-solid ma0 mb4">
@ -311,7 +311,7 @@
<div class="h-100 bg-pattern">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5 mb4">
<p class="f3 lh-solid ma0 mt5 mb4">
<em class="em-mint-2">
What your users see
</em>
@ -325,13 +325,13 @@
<!-- BOX -->
<div class="w-100 dib br2 mb5 mb0-l pa4 shadow-4 cclr-fnt-black-mid bg-white">
<p class="f25 lh-solid ma0 mb2">
<p class="f3 lh-solid ma0 mb2">
1
</p>
<p class="f7 lh-solid ma0 mb4">
Unique website
</p>
<p class="f25 lh-solid ma0 mb2">
<p class="f3 lh-solid ma0 mb2">
5
</p>
<p class="f7 lh-solid ma0 mb4">
@ -368,7 +368,7 @@
<div class="w-100 hx-more dib cclr-bg-yellow-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5">
<p class="f3 lh-solid ma0 mt5">
More features
</p>
@ -402,7 +402,7 @@
<div class="w-100 hx-try-user dib cclr-bg-mint-mid">
<div class="wx24 center">
<p class="f25 lh-solid ma0 mt5">
<p class="f3 lh-solid ma0 mt5">
Try as user
</p>
<p class="ma0 mt4 mr0 mr4-ns">
@ -431,7 +431,7 @@
</div>
</div>
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
<p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
<em>
Essential metrics
</em>
@ -518,7 +518,7 @@
<div class="wx24-metrics center">
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
<p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
<em>
Localize
</em>
@ -543,7 +543,7 @@
<div class="h-100 bg-pattern">
<div class="wx24-metrics center">
<p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
<p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
<em>
Make a difference
</em>

View File

@ -3,13 +3,13 @@
{% block content %}
<div class="w-100 mt5-ns cclr-bg-white-dark">
<div class="mw7 center pt5 pb5 ph4 bg-white">
<div class="mw7 center pt5 pb5 ph4 gray bg-white">
<div class="w-100 center">
<h2 class="f1-ns f2 normal tc ma0 mb4">
<h1 class="f2 normal tc ma0 mt3 mb4">
Try demo
</h2>
</h1>
<div class="gray">
{{ page.content }}
</div>
@ -40,7 +40,7 @@
<hr class="ma0 mb5 b--black-05">
<h3 class="f25 normal tc ma0 mb5">
<h3 class="f3 normal tc ma0 mb5">
Learn more
</h3>
<div class="flex flex-column items-center">