DEV Community: Alexander Schau

Collect emoji feedback on your blog or website

Alexander Schau — Wed, 23 Nov 2022 13:22:27 +0000

Hey Dev community,
in this post I want to show you, how you can embed a simple emoji feedback component to your website or blog with the help of Instant Emoji Feedback. This allows you to easily collect feedback and encourage your readers to interact with your content.

Step 1 - Login

You first need to login to [Instant Emoji Feedback] with your GitHub account. But no worries, you don‘t need to pay anything.

To do so, open this link.

Step 2 - Add the script and our Web Component to your website

As you can already see on the website, you now need to add two little things to your HTML.

First of all insert the following script tag to your <head>, to download download the component:

<head>
…
<script src="https://get-emoji.instant-feedback.click"></script>
…
</head>

After that you just need to insert the web component wherever you want the feedback form to be and you‘re good to go.

Please note that the component contains a personal id parameter. You can find yours in the install instructions on the website (shortcut).

<body>
…
<emoji-feedback id="YOUR_PERSONAL_ID" templates="👋,👍,👎"></emoji-feedback>
…
</body>

Bonus

You may noticed the templates parameter in the previous code snippet. You can use this one to define some default reactions, so your users don‘t have to spend time searching them.

By the way, mine are the following:

Final words

Thanks for reading til the end. I hope you will find Instant Emoji Feedback useful. I would love to hear from you, what your opinion on this project is.

And at the end I would also like to mention the pro version:

It allows you to moderate and analyze the given feedback all in one place and helps me keeping up with the bills 🙃.

Enjoy your day ☺️.

Import your GitHub or GitLab repository directly into Deno

Alexander Schau — Sun, 01 May 2022 11:13:30 +0000

Denopkg.dev is a open source Deno package proxy operating on the Cloudflare Edge Network.

You can use it to import your private/public GitHub/GitLab repositories into Deno 😎.

URL Helper

You can use the interactive form on our homepage to generate a valid link to your package in seconds.

Just drop the URL of your repo and let the magic happen ✨.

How to use it with private repositories

For private repositories simply generate a private access token and proceed like stated out here.

Share a URL to your package

If you want to share your package with some friends, it could be helpful to also send them some basic usage instructions. Just add /import/ after the denopkg.dev domain and you're good to go.

https://denopkg.dev/import/gh/alexanderschau/access_token@1.0.0/mod.ts

Contribute, it's open source

If you love denopkg.dev as much as I do, you can help me making it better and implementing new features by contributing on GitHub.

Denopkg.dev's GitHub Repo

And finally: Hacktoberfest is over

Alexander Schau — Sun, 31 Oct 2021 18:58:55 +0000

After a month full of crazy ideas for some new projects, now at the end of October, I find myself sitting here and thinking about all the things I learnt over the past weeks, things that worked out well and those that doesn't 😐.
In this post I want to summarize the things I have learnt this month.

Things I learned

HTTP streams

Being honest, I heard of data streams quite often in the last seven years of my career, but I never really dived into it. This changed when I decided to build a webhook service, which allows both the sender and the receiver to communicate between firewalls. I needed some sort of event streaming over HTTP. And what should I say? There even is a JavaScript standard for this (EventSource). It's sort of like a websocket, but without the ability to send a message back to server (without sending a new HTTP request).

Workspaces and Devcontainer in VS Code

Another thing I never did before was to create a workspace in Visual Studio Code. This month I finally tried it out and it is really helpfull when working with Monorepos. It allows you to hide specific folder (like node_modules) completely, which makes it easier to organize yourself in complex folder structures. I really can recommend you to give it a try.

The second thing I tried out was Microsoft's Remote - Containers Extension for VS Code (it is like GitHub Codespaces on your local device). It allows you to predefine a Dockerfile, from which your development environment will be created. Whit it you can code right away on every machine without the need to install dependencies by hand ever again. It also is a good preparation for cloud-based development, which definitely will be the future (the same syntax is also used by GitHub Codespaces and soon Gitpod).

Conclusion

I think if you really want to learn something, it doesn't need an event like Hacktoberfest to get started, however it is a great motivation to try out new things. Remember, we're never done learning.

I hope you all got through October well and maybe some of you also learned something new this month. I would like to invite you to also write about your highlights and achievements over the last month. Feel free to link your post in the comments.

Ps: For the equal rights of the American and British English speakers here, I used both word forms, "learnt" and "learned".

How I built a COVID-19 newsletter with n8n (in just 5 minutes)

Alexander Schau — Mon, 11 Jan 2021 10:51:49 +0000

The idea

My idea was quite simple. I wanted to build a corona newsletter, which sends me a daily email with the latest number of corona cases in my region, so I can keep myself up to date without checking multiple websites every day. To keep the whole project simple I also decided to use the open source workflow automation tool n8n.

The dataset

The biggest challenge at this whole project was the dataset. A simple method to get the data would be to just scrape the website of the local authorities and filter out the important stuff, but I wanted to challenge myself a little bit and build a tool, which will also work in other regions or countries. So, I started searching for a dataset with daily updates.

A dataset, which looked nice to me, was one provided by the European Union. The only problem with it: It doesn’t receive daily updates 😟.

After searching GitHub for a dataset, I found a, currently quite popular, repository of the Johns Hopkins University. It provides daily reports from many countries in the world and was thus my choice to go on.

The workflow

After finding the perfect dataset, I started building my workflow by adding a daily Cron node at 7am GMT, so I can get the latest data (they usually publish updates between 04:45 and 05:15 GMT)

After that I add a Function Item node, which formats the current date to the MM-DD-YYYY format, so we can use it as filename.

const date = new Date(new Date().setDate(new Date().getDate() - 1)).toISOString().split("T")[0].split("-");
item.date = `${date[1]}-${date[2]}-${date[0]}`;
return item;

Then I made a HTTP Request to get the file binary from the GitHub raw URL and convert the CSV file into JSON using the Spreadsheet File node.

The only thing, that’s left now, is to filter out the data of a region and sending it through email.

items[0].json.myVariable = 1;
return items.filter(item => item.json.Combined_Key == "Berlin, Germany");

Final words

Seriously, I never thought it would be that easy to build something powerful like this. Next to the possibility to sending emails, n8n also support lots of other ways like Matrix or Slack, which allows you to send this newsletter to the place where you need it the most.

If you now want to build this project on your own feel free to use my code (you will find it on n8n’s website and on GitHub), but I really recommend you, to build it from scratch, because it’s incredible to build something like this in just 5 minutes 😁.

Secure JSON Web Token with Unique Browser IDs

Alexander Schau — Sun, 08 Nov 2020 15:48:41 +0000

JSON web token (JWT) are a really good opportunity to create secure login workflows without storing tons of access tokens in your database. But as good as it might sound in the first moment they have a huge problem. After giving them to a user, you can't really control, if someone will copy them to another machine.

This makes it easy for everyone to just copy a JSON web token out of the Local Storage and place it somewhere else.

One of the first ideas you may have, if you want to solve this problem is to bind them to the clients ip so nobody from outside can use the token, but since we are speaking of IP scarcity and things like DS-Lite, this isn't a really good solution.

The Idea

The only really good solution for this would be to give each browser a unique ID, which only can be manipulated hardly like the MAC address.

Sadly nowadays browsers doesn't provide built in endpoint for this, so we have to built something around the existing APIs.

When you search around the internet for a while you will soon find some projects like AmIUnique, which are using parameters like your computers User Agent or the way of rendering text to distinguish between devices and browsers. When you use some of these indetifiers you can create a unique id for any device and browser as long as there aren't any updates to your system. But because in our case JWTs only need to be valid for some hours or days this should work fine.

Unique ID in React App

To show you how to implement this into your apps I will create a sample react app and use the uniquebrowserid package for creating the unique IDs.

After you initialize your app, you can install the package with npm install uniquebrowserid, open the App.js file and add the following code:

After saving the file and running npm run start you should see your unique browser ID in the app.

To bind this into your JSON Web Tokens, you just need to send the result of the new UID().completeID() function to your backend.

If you want to learn more about the implementation of unique browser IDs into your app, you can visit the packages website at: https://www.npmjs.com/package/uniquebrowserid. There you also find, how to create one time unique IDs.