DEV Community: Eckhardt

Add Push Notifications to an iOS PWA (w / Nuxt & FCM)

Eckhardt — Wed, 07 Feb 2024 09:43:27 +0000

I built a startup with Nuxt 3, Fastify and Zod - watch me add a feature live 🥲

Eckhardt — Sat, 28 Jan 2023 06:20:00 +0000

Maintain / improve website performance with Lighthouse and Auditio

Eckhardt — Fri, 20 Jan 2023 06:16:13 +0000

The web is moving towards performance

When you look at the current web ecosystem, you'll see players like Deno, Bun, Qwik all pushing the frontier on performance in their own domain.

There is growing chatter in the development community regarding load times, content repaints, JS payloads etc. and though it's growing - not a lot of people care much for it.

Many developers, web agencies and / or frameworks still focus on product-first instead of overthinking optimizations.

Speed is product, but there's a better way

It's no secret that some sort of correlation exists between load times and conversions / sales and I think it's fair to argue that speed is a part of your product offering's KSP.

It's not always feasible to be performance-first focused when launching a new product or MVP of a product. This is where I think the Kaizen philosophy is a great tool.

Using the principles of Continuous Improvement, we can instead incrementally improve what matters. That is to say, we have a faster go-to-market and then we optimize.

Sounds like a job for Auditio

Auditio is a tool that provides us a way to do this. It allows you to add your website's URL and then set a frequency at which you want to run a Google Lighthouse audit on that URL. Just set, forget and check periodically.

Every day / week / month you are provided with a snapshot of your website's current performance. Using this we can implement the Kaizen philosophy and say: "We don't want 100% performance right now, but we want to at least know what we can do to be a little bit faster than yesterday or last week".

This approach, to me, seems much more sustainable than spending an exorbitant amount of time to optimize a site before it even goes to market to be validated in terms of utility and content.

How fast should your website be?

I don't think a 100 score on every page is a healthy / realistic target, neither do I think 25 is great. To me the middle ground of improving what you can and maintaining what is good seems much better.

Let me know what your page ranks at! Do you think Auditio can be a useful tool?

Note, right now there is a free offering at Auditio during their Beta stage. Check it out at https://auditio.cc.

Setting up Nuxt3 for Scale with Turborepo and TDD

Eckhardt — Fri, 05 Aug 2022 11:09:14 +0000

Nuxt 3's useLazyAsyncData is a MAGIC function 🪄

Eckhardt — Tue, 15 Mar 2022 13:16:42 +0000

Build an INSANELY easy Vue/Nuxt 3 UI library published on NPM in 3 minutes 🚀

Eckhardt — Sat, 12 Mar 2022 09:52:38 +0000

Building a fully automatic https developer profile generator with Nuxt.js, Caddy, Typescript, Sequelize and more.

Eckhardt — Tue, 08 Mar 2022 10:45:38 +0000

Overview of My Submission

Persona

One public profile to rule them all. By developers for developers.

Description

Persona was developed for the dev.to Microsoft Azure hackathon. It's a mono-repo TypeScript project featuring many things like GitHub OAuth, Mono Repo architecture, Database Management, API servers, Full-Stack Modern JS framework apps, complicated networking concepts through allowing users to point their own domains to a DNS and view their public profile on it.

Features

How the app works

You access the app at https://azure.kaizen.com.na. Here you can authorize the application with GitHub to create a base profile.

Add a custom domain

The input to add a custom domain e.g. profile.example.com will allow you to save a custom domain to your profile, once you CNAME this domain to dns-azure.kaizen.com.na, your public profile will be accessible there. (by default it's accessible by https://static-azure.kaizen.com.na/<your-user-id>, which is accessible on your dashboard).

Try my custom domain 😀

https://profile.kaizen.com.na

Update your profile

Currently you can update your:

Name, that will be displayed on your public page
Bio (Markdown enabled), which can be previewed by click the 'toggle preview' button when in 'edit mode'
Website (not currently used in public)
Profile Image, You can upload a new profile image in edit mode (defaults to your github image). This is shown on your public page.

Note: The markdown editor doesn't support full markdown features. For security reasons and not having the time to do proper sanitisations I've disabled html.

Developer Notes

The code is pretty much reusable outside of some things:

Hard coded url values e.g. https://azure.kaizen.com.na: you'll have to update these to yours.
ENV variables: I have left some .env.dist files where necessary so you know what is required to run the app.

git clone https://github.com/Eckhardt-D/persona.git

yarn install

yarn dev

Note: The VM runs a Caddy server. This allows for easy config on auto-https and reverse proxying, install Caddy on your VM and edit your Caddyfile to this (just update the hard coded domains to your own and make sure they point to your instance IP):

{
    on_demand_tls {
        ask      http://localhost:3002/domain/verify
        interval 2m
        burst    5
    }
}

https:// {
  tls {
    on_demand
  }

  reverse_proxy {
    to http://localhost:3001
    header_up Host {upstream_hostport}
    header_up X-Forwarded-For {host}
  }
}

azure.kaizen.com.na {
  tls internal
  reverse_proxy http://localhost:3000
}

api-azure.kaizen.com.na {
  tls internal
  reverse_proxy http://localhost:3002
}

static-azure.kaizen.com.na {
  tls internal
  reverse_proxy {
    to http://localhost:3001
    header_up Host {upstream_hostport}
    header_up X-Forwarded-For static-azure
  }
}

As simple as that, the monorepo was setup with DX in mind. Although there could be some nuances that'll have to be referred to by opening an issue to this. Hope you enjoy it and feel free to contribute.

Submission Category:

Computing Captains

Link to Code on GitHub

Eckhardt-D / persona

Source code for the Microsoft Azure dev.to competition

Persona

One public profile to rule them all. By developers for developers.

Description

Features

How the app works

You access the app at https://azure.kaizen.com.na [Instance Has Been Shutdown]. Here you can authorize the application with GitHub to create a base profile.

Add a custom domain

The input to add a custom domain e.g. profile.example.com will allow you to save a custom domain to your profile, once you CNAME this domain to…

View on GitHub

Additional Resources / Info

Build an Automated Nuxt Content Blog with Firebase and Github

Eckhardt — Thu, 16 Dec 2021 03:04:34 +0000

SML - The language I love to hate. (Recursion example).

Eckhardt — Wed, 13 Oct 2021 16:46:33 +0000

Standard ML has been around for a while, I never cared for it until enrolling at OSSU's program. It's a functional programming language with very interesting features like immutability and relies heavily on the usage of recursion.

A recursive example in SML

fun factorial n = 
    if n = 0 then 1 else n * factorial (n - 1)

This function can also be expressed as:

fun factorial(n : int) = 
    if n = 0
    then 1
    else n * factorial (n - 1)

If you use factorial it may look something like this:

val result = factorial (5) (* equivalent: 5 x 4 x 3 x 2 x 1 *)

And in actual fact, this function actually (cheekily) multiplies by 1 again on the last iteration, which has no effect on the output: 120.

Writing SML as a web developer

During the course assignments it was a REAL pain to not have the ability to declare variables in the upper scope and change their value, or use loops, and dealing with the thinking work that goes into recursion.

Hot tip: If a function accepts an Array / List that needs to be processed in a loop - it most probably can be done with recursion too. 🤘

A JS example re-written in SML

Return the sum of all elements in an array

// Example 1
function sumArray (nums) {
  let total = 0;
  for (let i = 0; i < nums.length; i++) {
     total += nums[i]
  }
  return total
}

sumArray([1, 2, 3, 4, 5]) // 15

// Example 2
const sumArray = (nums) => nums.reduce((prev, curr) => prev + curr, 0)

sumArray([1, 2, 3, 4, 5]) // 15

Much of the logic above is either ludicrous or doesn't exist in SML, and we'll have to do something like:

fun sum_array (nums: int list) =
  if null nums
  then 0
  else hd nums + sum_array(tl nums)

val summed = sum_array([1, 2, 3, 4, 5])  (* 15 *)

These were just a few quick examples. If you want to see me explain these things (a little) more and If you want to see me do this with 5 slightly more complex problems, give my latest Youtube video a watch:

Appreciate the 👍

Conclusion

I think we developers should definitely focus on the language that is most demanded from us - to improve our skills / knowledge, nevertheless - SML has taught me that there are different and sometimes better and cleaner ways of solving programming issues.

This has been Eckhardt Dreyer, coming to you with a look into what I explore on the web. If you like what I make Buy me a coffee? 🍺

Downloading images in the browser with Node.js

Eckhardt — Thu, 09 Sep 2021 08:54:54 +0000

Image downloading in modern browsers seems like a topic trivial enough - why write about it?

The drawback of native HTML downloading

HTML5 has a neat download attribute readily available for the anchor element - by simply adding the following, a user can easily view the image by clicking the link.

<a href="https://picsum.photos/200/300" download="random.png">
  Download this image
</a>

The problem with this approach is that the image simply opens in the browser and requires the user to save as. This behaviour may not be the preferable user experience. A better flow may be that the user clicks the link and it automatically downloads into the Download Folder configured in the browser's settings.

This is also achievable without any server-side code in the following way:

index.html

<button id="download-link">Download Image</button>

index.js

const downloadButton = document.querySelector("#download-link");

downloadButton.addEventListener("click", async (evt) => {
  evt.preventDefault();

  // Fetch the image blob
  const url = "https://picsum.photos/200/300";
  const response = await fetch(url);
  const blob = await response.blob();

  // Create an objectURL
  const blobURL = URL.createObjectURL(blob);

  // create a hidden anchor element
  const anchor = document.createElement("a");
  anchor.style.display = "none";

  // Set the <a> tag's href to blob url
  // and give it a download name
  anchor.href = blobURL;
  anchor.download = "image-name.png";

  // Append anchor and trigger the download
  document.body.appendChild(anchor);
  anchor.click();
});

The client-side code above listens to a click on the HTML button, fetches the image as a blob, creates an objectURL, adds it to a newly created (hidden) anchor tag and clicks it to initiate a download. Because the anchor tag has an object URL, the browser will initiate the download to the user's Download Folder.

This experience may be more user-friendly, but don't be surprised if you run into the notorious CORS wall. CORS or Cross-Origin Resource Sharing may many times cause the download to fail from the browser if the resource is not on the same origin, or doesn't have the appropriate headers set.

Making image download robust with Node.js

Luckily, for requests not coming from a browser e.g. a Node.js server - CORS can be safely bypassed. The following example only requires one simple change to the download logic on the client - the URL. Instead of making a fetch directly to the image, you will make it to your Node.js API endpoint, which could be set up as follows:

app.js

const fetch = require("node-fetch");
const express = require("express");
const app = express();

app.get("/image", async (req, res) => {
  // Fetch the required image
  const imageURL = "https://picsum.photos/200/300";
  const response = await fetch(imageURL);

  // Set the appropriate headers, to let
  // the browser know that it should save
  res.writeHead(200, {
    "content-disposition": 'attachment; filename="my-image.png"',
    "content-type": "image/png",
  });

  // Pipe the request buffer into
  // the response back to the client
  return response.body.pipe(res);
});

The example above has a few parts to it, namely:

Requesting the known image URL to receive the raw body in the response. The URL here could be dynamically set too and that way you could simply prepend your server URL to any image URL, e.g.

app.get("/image/:url", (req, res) => {
  const { url } = req.params;
  // ...
});

Just remember to encode the URI on the client before appending it to your server URL, e.g.

const finalURL = `https://your-server.com/image/${encodeURIComponent(url)}`;

Setting the appropriate headers for the response:

content-dispostion with a value of attachment will tell the browser to save the file instead of the alternative inline which will try to render the response in the browser.

Note here too you might want to have some sort of library or checker to determine the image MIME type e.g. image/png for the content-type header and file extension to be accurate.

Piping the result into the response:

This simply takes the data in the result body and feeds it into the body of the response to the client.

Serverless Caveat

If you're using a serverless solution, be mindful of their Request Payload size limits. E.g. AWS limits the size of request bodies to ~6MB. If you're working with large images, consider a static solution.

Conclusion

If you're already calling a Node.js back-end to feed your front-end, why not add an endpoint to help you download remote images with a better experience. You even get the niceties of overcoming the dreaded CORS error.

If you want to automate this task for your website screenshots, let Stillio do the heavy lifting.

Why Promise.all() is not always a suitable solution. ⚡💡

Eckhardt — Thu, 15 Apr 2021 10:04:56 +0000

Background

Here at Stillio, it's paramount that we take care of the code we write. We process thousands of images and people rely on us for making sure their screenshots get delivered.

Recently, we found something that might be interesting about Promise.all().

What is Promise.all?

The .all method on the Promise object is a neat way to process a list of asynchronous actions in order and receive an Array of results. e.g.

const promises = [Promise1, Promise2, Promise3...]
const results = await Promise.all(promises)

// results: [Promise1Result, Promise2Result, Promise3Result...]

A handy feature of Promise.all is that it will give back the results in the order that the promise array was given, let's look at a more robust example:

const urlArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

function asyncAction(index) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(index), Math.random() * 5000);
  });
}

const promises = urlArray.map(num => asyncAction(num));

async function start() {
  const results = await Promise.all(promises);
  console.log("Results: ", results);
}

start();

Description

Above we have a fake urlArray variable. Assume that this is actual urls that we want to fetch. Since fetching is an async event we simulate that with the function asyncAction.

All asyncAction actually does is return a promise which resolves at a random interval between 0 and 5000ms. This is to simulate changes in network latency, not all requests respond in the exact same time.

To create an Array of Promises, we map the urlArray and return a new Array with the Promises after calling asyncAction. These aren't resolved yet, so we use Promise.all() in start() to give us an Array of results and since the function just returns the number:

console.log("Results: ", results); // Results: [1, 2, 3, 4,  5, 6,  7, 8, 9, 10, 11, 12]

The results demonstrate that even though each request took a considerable different amount of time to complete, the Promise.all() method made sure that the results were returned in the correct order, hooray there's reliability! Or is there...

Where Promise.all() gets interesting

Let's look at the above example again, but this time we change some things up. In the fake request let's update the resolve function to this:

function asyncAction(index) {
  return new Promise((resolve) => {
    setTimeout(
      () => resolve(`${index}: ${new Date().toISOString()}`),
      Math.random() * 5000
    );
  });
}

We've added a date component to the result of the Promise. This is actually something that we required in our code base. We had to process multiple URLs in an Array asynchronously and give it a timestamp that was congruent to the order of the Array. Sounds like the perfect job for Promise.all().

Let's run the code again with the timestamp component included, here's the result:

Results:  [
  '1: 2021-04-15T07:55:28.315Z',
  '2: 2021-04-15T07:55:27.586Z',
  '3: 2021-04-15T07:55:30.063Z',
  '4: 2021-04-15T07:55:30.707Z',
  '5: 2021-04-15T07:55:28.549Z',
  '6: 2021-04-15T07:55:30.284Z',
  '7: 2021-04-15T07:55:27.231Z',
  '8: 2021-04-15T07:55:29.844Z',
  '9: 2021-04-15T07:55:26.287Z',
  '10: 2021-04-15T07:55:27.308Z',
  '11: 2021-04-15T07:55:28.798Z',
  '12: 2021-04-15T07:55:30.978Z'
]

As you can see, Item 10 was created ~1s before item 1 was created. Even though the method maintained the order of the Promise resolutions, there was this effect that timestamps were dependent on these random intervals.

This makes sense if you think about it, because fundamentally the issue already arose in the loop - when generating the promises. The loop doesn't wait for the previous promise to arrive for the next one to be made - it's still just a Promise.

The alternative approach

const urlArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

function asyncAction(index) {
  return new Promise((resolve) => {
    setTimeout(
      () => resolve(`${index}: ${new Date().toISOString()}`),
      Math.random() * 5000
    );
  });
}

async function start() {
  let results = [];

  for (url of urlArray) {
    results.push(await asyncAction(url));
  }

  console.log(results);
}

start();

The code above is very similar, except we've removed promise.all() and replaced it with a simple for of loop. On each iteration, we HAVE to wait for the previous result, because of await. The outcome is:

[
  '0: 2021-04-15T08:12:13.026Z', 
  '1: 2021-04-15T08:12:17.042Z', 
  '2: 2021-04-15T08:12:21.314Z', 
  '3: 2021-04-15T08:12:21.600Z', 
  '4: 2021-04-15T08:12:22.984Z', 
  '5: 2021-04-15T08:12:27.061Z', 
  '6: 2021-04-15T08:12:28.771Z', 
  '7: 2021-04-15T08:12:30.432Z', 
  '8: 2021-04-15T08:12:31.530Z', 
  '9: 2021-04-15T08:12:35.691Z', 
  '10: 2021-04-15T08:12:40.394Z',
  '11: 2021-04-15T08:12:41.410Z'
]

The results are ordered and so is the time component. This was what was actually expected.

Conclusion

Promise.all() is a super handy tool but because of it's abstraction, it's easy to overlook something like a time component. Keep in mind, the first example ran much quicker than the second, since the timers didn't need to complete before the next result was fired.

So in general, if there is an element of time. e.g. a dateCreated property on the results of a list of Promises or asynchronous actions, consider using a loop instead of Promise.all().

by Eckhardt Dreyer
Frontend Engineer
Stillio automated website screenshots

Dealing with novel emotions as a new-born developer

Eckhardt — Mon, 12 Apr 2021 07:59:14 +0000

Photo by cottonbro from Pexels

The honeymoon phase of software development

This stage is where the proverbial hook sets and you're spending most of your time doing courses, watching live streams or thinking about what cool thing you can build with your new-found love for this art that is software development.

Some are, at this point, already working as an intern / junior and others (most) aren't in the field professionally yet - but the experience is similar. It kind of feels like there's no limit to what you want to learn or build.

Hopefully here is where you have used your energy and motivation to employ your skills towards a goal of actually making a living from it. This is the best time to pivot, because you'll want to head each problem UNTIL you have figured it out. This trait is well sought out in this industry.

From novel to monotony

One day you're at the computer, looking at the same code that you've seen for the past few months. Repeating the same patterns, reporting to the same people - git add, git commit, git repeat.

The novelty of it all wanes and all of a sudden you're not watching your usual Youtube tutorial before bed, you're not waking up and sketching some idea that came to you. You're just going through the motions.

People around you don't really seem to get what you're doing either, they just assume you're in IT - so they assume that your dark circles and depressed attitude comes with the trade.

Burnout in software development

Then Finally it comes to the point of no return and you burn out. Suddenly there's no interest in something you once loved SO much. At this point I quit software for over a year and barely ever even opened an IDE. Some grind on, others quit and some handle it even worse.

Recovery from software burnout

This is where I hope to give some insights from my own experience, chances are not many are reading this post unless they feel like they have to. So if you feel that way - I hope the following advice from my personal experience can help you.

First of all if you're experiencing serious mental health problems in your career or life. Please seek professional help - there is no substitute for trained counseling.

(Prevention > cure) for burnout

Recognizing that you are losing vigor and a lust for life is one of the most important steps in preventing burnout. It is usually when I ignore the signs where it gets ugly. Take a 5 minute self-evaluation every day and ask yourself 'Am I ignoring things that I should be focusing on with regards to my health and energy?'.

This is not to make excuses to yourself about not really feeling like getting up or general life challenges. But be honest and ask whether you are still excited about your favorite aspects of software? Is something draining you and causing you to push away your love for the skill? Then work to address that thing as early as possible.

Evaluate the people you're working with

Sometimes it's not the work or mundane aspect of it all. It could be that a person is causing this pre-frontal cortex drain and sapping all valuable energy you could have employed into your work. This could be the absolute ***hole of a senior completely destroying your self-worth, by degrading your work through condescension, or on the flip-side, the junior who just isn't getting it and you have to keep fixing their problems.

Both these situations can be prepared for, by setting out time for work first and then preparing an hour of expected mental pressure from people around you. Accept that you and other people may sometimes suck, but prepare for addressing it structurally.

Ask members to respect your time when you're working and reserve critical interaction for planned spaces. In this time put on your 'Interacting with people hat' and when it's over, take it off again.

If a situation is dire and nothing you do or say is respected or you are being treated horribly - consider leaving, but plan for it first. In my case I basically just upped and left (which in hindsight may not have been the greatest decision financially).

For some hope to you, I have now found a team - Stillio - who I've been working with for the past few months and I can honestly now say that the right people around you is just as important as what project you're working or what your salary is. The people at Stillio have truly been amazing and shown that the industry does have great teams. You just need to find them.

Keep the fire for software lit

This sounds a little on the nose, almost like saying 'If you are sad, just be happy 🙄'.

The way I re-kindled the fire is to keep learning. This is what brought us into software in the first place and I think a lot of us forget that. There's a strange thing about motivation - where you think you need to find it first, before taking action. I found the reverse - that taking action towards learning even if there's little motivation, seems to bring that motivation back and suddenly work becomes exciting again.

Look after yourself in other areas

Finally, there is no discounting health and wellness. Software can rob us of time and if we're not careful we'll start replacing time for nutrition, exercise, sleep and family with more hours in front of the PC, because we just HAVE to fix the bug or meet the deadline.

These very things that we find unimportant in that moment will help us be better developers in the long run. Build a schedule that suites you that incorporates these elements. Remember that small changes compound over time.

for(let days = 0; days < endOfTime; days++) {
  if(iDoJustALittleBit) {
    itAddsUp();
  } else if (iDoNothing) {
    // I will
    break();
  }
}

Conclusion

If you're struggling with this reality of burnout in software development. Self-analysis, planning difficult interactions with difficult people (Or planning to leave if the situation calls for it), keeping the student mindset alive and revisiting healthier habits in other areas could help you like it did me.

And as the adage goes: 'This too shall pass.' Be kind.

This post mentions Stillio, with whom I am affiliated. Stillio is a screenshot automation SaaS for brand management, SEO tracking and more. Check out what I'm working on by visiting them at https://www.stillio.com