Forem: Red Ochsenbein (he/him)

What are we even doing

Red Ochsenbein (he/him) — Fri, 22 Nov 2024 15:45:39 +0000

So we had our fair share of an AI hype cycle now. It's still something we hear about every day and companies are out there trying to out-innovate each other, even if only in the marketing department.

Interestingly most generative AI products - which are all the rage these days - focus on taking away the tasks which brought joy and were underappreciated, underpaid and exploited anyways. The actual writing when writing, the actual craft when creating art, and actually playing music, when creating music. What's left when you take the skills and craft away from art? A blunt shell. A quick dopamine hit for a few minutes - if even that. Maybe we should stop for a moment and ask "Why?". Why are we doing this? What are we winning?

"Productivity" I hear some scream. "I'm 10 times more productive thanks to AI" they say. Even if this is true, what for?

Do we need 10 times the articles to read? Do we really need 10 times the songs to listen to? Do we need 10 times the images to look at? Do we need 10 times the emails, spam, websites or even code? And if not, what does the productivity gain do? Destroy 10 times the jobs? Kill 10 times the joy of creating art? I don't know the answer, but I never heard one from those who claim to be 10 times (or even 100 times) more productive.

Another thing: I don't believe those tools are really that powerful. I see how easy it is to get to the limits of generative AI tools. I don't even have to try that hard to receive really bad code and get myself into a loop of pointing out errors, the AI saying "I'm sorry, you're right..." and repeating the same useless code again. This is only one example. You probably heard about the problem of generative AI not being able to count the 'r' in Strawberry, or similar things. Those problems are not the exception, they are the norm.

This is where I start to ask myself how useless someone must have been if he gets 10 times more productive thanks to AI. Don't get me wrong: I believe there are fields where AI really can help you sift through huge amount of data or improve some processes. But those applications usually don't require a LLM.

Let me ask: What are we even doing?

We let the algorithms and models take the things we like, the things that make the human experience valuable. All in the name of productivity. And we use more and more energy to run those things, though we are burning away humanities future already, even without AI. Talking about the climate. There are those who think we can and should build huge machines to just capture the carbon and store it somewhere. Since those technologies only make sense without burning fossil fuels to operate them, we use solar cells to generate the energy. So, let me summarize: We use solar power to capture carbon from the atmosphere to bind and store it somehow. Congratulations: You just invented a tree.

What are we even doing?

Can we all just stop and start asking "Why" more often? And maybe we might find some better ways to exist. If we can get there I'll start to be optimistic about technologies and AI. Until then I'll stay a skeptic and maybe even a bit cynical.

I'm tired of it

Red Ochsenbein (he/him) — Sun, 21 Jul 2024 14:27:39 +0000

The epidemic

It's everywhere on dev.to, and it's everywhere else, too. I'm tired of it.
AI generated content.

You know, we can spot it. The generic, bland and boring articles, which are usually filled with inaccuracies. The image without personality. The creepy videos with no real meaning. But let me tell you: If you do not want to put in the work to research, to learn and be an expert, to struggle and get good at a craft you enjoy, then you don't provide value in any way. And if you do not provide value, what is the point? It's worthless to anyone out there who would be better off just reading the docs, or an actual book written by a human; and it is worthless to you, because you don't even seem to enjoy the process itself enough to actually do it. So, why even bother?

Yeah, I get it, it's all about those 'likes' and 'followers'... but let me tell you: even those are probably mostly bots.

I'm tired of it.

Pointless articles

And there it is again. Another article on dev.to. Not really interesting to read, and full of wrong things and stuff that does not even exist. As soon as you point it out the authors usually get pretty defensive. Just lying and trying to gaslight you into thinking they actually wrote the article by themselves, even though you can prove the opposite by simply using the the title of the article as a prompt to generate an article which sounds 99% identical. Sure, mate, you are allowed to just create a bland article using LLMs... but please, don't try to tell me you're actually providing value by doing that. And, please, pretty please, at least check if the info is correct. Do the code snippets work? Do the CSS properties even exist? And while you are on it: please check if you actually provide any value over me just reading the docs, or putting the prompt into ChatGPT by myself.

I don't really enjoy writing. I don't enjoy the process of getting good at it. I don't even feel like I have much to say. But still, if I think I want to tell something I'll write it myself, because I want at least try to add value. I want to do things I enjoy. I'm pretty sure just creating prompts is not fulfilling to anyone in the long run.

I'm tired of it.

Email decompression

I noticed an interesting thing lately. There are people on one side just using a simple prompt to generate an email. And then there are other people on the receiving end who take the email and paste it into ChatGPT to have it summarized. It's some sort of inverse compression: Make it longer before you send it and condense it again after receiving. Maybe we might try to do the opposite: Write a full email, let the AI condense it into the summary and send that. Or how about you learn to write concise emails to begin with? Or maybe digital communications is getting pointless anyways since there are only bots left on both sides. In any case...

I'm tired of it.

Be human

What should you do? Be human! Take the time to suck at something. I'll be way more interested in your crappy beginnings full of personality. I'll be way more interested in the craft you spent hours with. I'll be way more interested in your article with typos, grammatical inaccuracies and stylistic flaws, but full of your wit and passion. Your story matters, not the one AI compiled from the statistical probabilities of millions of other stories, because...

I'm tired of it.

How I got to 2000 followers on dev.to

Red Ochsenbein (he/him) — Thu, 14 Dec 2023 14:48:39 +0000

A Journey Towards Influence: My Road to 2000 Followers

I remember when I had a few followers - close friends, family, and a couple of generous strangers who happened to stumble across my content. It was a modest beginning to what became an incredible journey towards building a community of 2000 followers.

Firstly, building any kind of influence on social media is a journey, not a sprint. It took a combination of dedication, consistent content, and an unwavering commitment to authenticity.

One important aspect of this journey was the dedicated time each day to engage with my followers. Whether through detailed replies or even just a simple 'like,' I made sure to respond to every comment. This not only helped foster strong relationships, but also demonstrated to newcomers that I was accessible and valued their participation.

Consistency was another critical element of my strategy. Regular, high-quality content gave people a reason to return. I wanted to be a reliable source of information and entertainment, but I also understood the importance of staying true to myself, which brought authenticity into the equation.

Being authentic means sharing your genuine self with the world. For me, it was about being honest in my communication, from the topics I chose to write about to the way I interacted with my audience. It's easy to fall into the trap of trying to be someone you're not, but the real you resonates much more powerfully.

These were key pillars in my journey to reach 2000 followers. Along the way, I've learned so much and have genuinely enjoyed connecting with so many amazing individuals.

Looking at the follower count is great, but the real prize is the community that's been built. Here's to the next milestone!

Only one thing: This is all just BS written by GPT-4. What I actually did is this: I wrote some articles in the past, commented sometimes and the follower count just kept going up. I guess 90% of them are just bots or something. But that's it. No magic, nothing fancy... Sorry.

More thoughts on the state of AI

Red Ochsenbein (he/him) — Tue, 04 Apr 2023 13:10:47 +0000

I recently wrote an article with my thoughts on the state of AI. Little did I know about the flurry of developments we would face in only a few days. We are now at a point where high-profile people are asking to pause and think. And I am sure we should pause and think. Does this mean we should stop the development? It's not even a question: The cat is out of the bag - there is no stopping now. What we should do is increase the efforts in the fields of AI safety, ethics, social development, and the definition of human work... by a lot.

There were more than enough examples in the past where those voices asking for more consideration were silenced in the name of profit. We can't do that anymore. The price is simply too high. Do I have the answers? No, nobody has. We just don't know what we are and will be dealing with.

Anyways, here are some thoughts keeping my brain busy lately.

Noise-to-signal ratio

AIs help us to create content at a way faster pace. Even without any training, you can put out texts, images and other things which a few years ago would have needed quite some skills. Now those things are available with a click of a button. Sure, someone might argue skills are still important and that being able to build on the AI's output will lead to better results from experts. Even if this is true (I will discuss this a bit more in-depth below) the big problem will be to find the 'diamonds' within the noise. Not only is there more content burying the great content, but the noise is also louder. In many cases, it takes an expert to be even able to discern the good from the not-so-good stuff.

Just recently Github Copilot X was presented and on their site, it was stated that 46% of code is already created by Copilot (I am not sure about that number, but let's just run with it). The same will probably happen with the flood of generated images and texts. Bots just creating websites with the help of GPT-4 for SEO reasons are probably already at work. If we extrapolate this development it's easy to see that in a not too far future we will basically train the models with 99% AI generated content. This might lead to whole bunch of problems down the line like even further bias amplification and similar things.

Killing creativity and knowledge

Too often we hear the question "Should I even learn to..." especially when it comes to starting to learn to code. The answer is "yes" most of the time. But if we think about artists creating especially digital art, music or texts. Why should they spend thousands of hours honing their skills if anyone can create something with a short prompt which most the people out there wouldn't be able to distinguish from your work? What does a skilled artist think about some models just taking your work and creating thousands of images in a style you developed with years of hard work?

I think this might lead to a decline in artistic and creative work. There is simply no incentive to keep on doing the work anymore. Sure, one might argue you should do it for fun and not for money. But this has been the argument which allowed the exploitation of artists, musicians and many other creative workers for decades.

As we have seen the flood of generated content will drown the work of skilled people, AIs will be trained by generated content and artist have fewer incentives to hone their skills. So, we will see a slow decline in creativity and knowledge.

Privacy and international laws

On March 31st of 2023 (a few days ago) Italy banned ChatGPT and OpenAI was forced to block users from Italy. Italy claimed OpenAI would not comply with GDPR, EUs privacy and data protection law. GDPR requires anyone providing a service in the EU to ensure certain things. Amongst others, anyone has the right to have any data about them to be deleted or corrected.

Now, when you understand how a large language model is trained it quickly gets obvious this is not a small thing to do. How do you delete data in a model which is a black box? How do you correct specific data? And if the model is just hallucinating facts about you, how can these be corrected? The same questions pop up when thinking about pictures of existing people. There are privacy rights like the right to one's image.

These questions will be very important. I'm not entirely convinced Italy's step was the right one, but I am certain these are things that need to be addressed.

To AGI or not to AGI

With the release of GPT-4, the discussion of AGI got more into the picture. AGI is the idea of an AI displaying actual intelligence enabling it to do intellectual tasks across a wide range of domains and contexts without having to specifically program or train for each task. It's a so-called emergent behaviour.

Human-level AI

Some people are interested in getting to human-level AI. This means that the AI should be able to do the same cognitive tasks as a human. I am thinking that maybe nature already found the most efficient way to do this: The human. If we assume that it actually might be the human 'flaws' like having to sleep, biases and imperfect perception are a requirement for human-level intelligence. If this would turn out to be true, then what is the point of building the same again? At this point, we simply don't know.

Non-human AGI

The other possibility is that AGI might not require to be human level. But then the AI might be closer to any alien species than to humans. If this is the case how would we ever be able to make sure the AIs goals are aligned with ours? This opens up a whole new set of challenges and dangers known as the alignment problem.

Consciousness

Another thing to consider is if those models actually could get conscious. How would we be able to determine consciousness in such a model? How would we have to treat it if we only would have to suspect it has some sort of consciousness? Wouldn't morality and even the law not have to extend to machines then? (Well, to be fair, we, as humans, are already pretty bad at treating animals...)

Final words

Those are only a few - rather chaotic - thoughts on AI. We do not know what the future will bring. But I'm pretty sure we need to do better than we do today when it comes to AI safety, ethics, social impact and similar fields.

Thoughts on the current state of AI

Red Ochsenbein (he/him) — Sun, 19 Mar 2023 13:22:14 +0000

Here we are! AI is the big thing everyone was expecting for years now. It's not a new idea. More than half a century ago science fiction writers were already talking about it. But now it is here. What will we do with it? Where will it lead to? What happens to our society?

To be honest: Nobody knows what the future will be like. 10 years ago I was overly optimistic about autonomous cars. I predicted that within 5 years every new car will be self-driving. Well, 10 years in and it still seems to be coming within 5 years (probably not).

But what do I think about LLMs like GPT-4 or ChatGPT, or things like DALL-E and Midjourney? I'll try to take you on a journey through my thoughts.

The optimistic view

Chances in healthcare

Advancements in technology have the potential to revolutionize healthcare in a number of ways, from more efficient diagnosis and treatment to better access to care for underserved populations. Telemedicine and digital health platforms are becoming increasingly popular, allowing patients to receive remote consultations and access to medical information and resources.

I think, most importantly AI and machine learning can also help healthcare professionals make more accurate diagnoses and develop personalized treatment plans for patients. No medical doctor in this world is able to keep up with all the new developments and papers. Especially when it comes to rare diseases it will be helpful to be able to feed an AI with symptoms and other data and retrieve pointers to things the doctor might not even have heard of.

Those developments will increase the quality of life for many when we manage to make it accessible and affordable for everyone.

Chances for society

Emerging technologies also offer many benefits for society at large. The use of autonomous vehicles could improve road safety, reduce traffic congestion, and cut down on greenhouse gas emissions. Smart cities could help us better manage resources, from water and electricity to waste disposal. The technologies can help to address social issues such as poverty and inequality, by providing new tools and opportunities for education and economic empowerment.

Increased automation could lead to a redefinition of work. Society might finally be able to fulfil the promise of a more purposeful life and not having to rely on a job just to be able to survive.

Chances for the environment

The new technologies have the potential to help us address some of the biggest environmental challenges we face today. Renewable energy technologies such as solar and wind power can help us transition away from fossil fuels and reduce our carbon footprint. AI can help us find improved ways of reducing unnecessary transportation, make supply chains and distribution of resources more efficient. Advanced agricultural technologies such as precision farming can help us reduce waste, conserve water, and increase food production in a sustainable way.

The pessimistic view

Black box problem

One of the main concerns with AIs is the so-called "black box problem." As machine learning algorithms become more complex and powerful, it becomes increasingly difficult for humans to understand how they are making decisions. In a neural network, you can't just go in, take a look at any part of it and extrapolate the final result from there.

As far as I see it, never before we built something we can't comprehend in such a way. If you think about it, we build incredible machines, but we always knew how each of its parts contributed to the whole. This is no longer true in neural networks and other algorithms. This lack of transparency can be problematic, particularly in areas such as healthcare, where decisions can have life-or-death consequences.

There is also the risk of algorithmic bias, where the algorithms reflect and reinforce existing biases and inequalities in society. As a heard a CEO saying once: "Why should we care about biases in algorithms? Humans have biases, too." This sums up the problem quite well. There seems to be a lack of awareness in the field.

Alignment problem

Quite similar to the black box problem is the Alignment problem. Since we can't really see into the inner workings of the decision-making process of those models we really can't know if the goal of the AI is actually aligned with the goal we think we gave it. There are several examples of this. Can we be sure an image classifier identifies something because of the thing itself, or just because something always happens to be on those images? Is a doctor a doctor because she has a stethoscope? Or is it the gender? Or anything else?

Social acceptance automaton

If you think about how we train a language model. First, we train a model which should learn how a human would interact with the model and then we train the actual model with the other model. Does the language model really learn to give accurate and correct information, or does it learn to please the person interacting with it? In other words, a language model might just learn to tell us what we want to hear.

How can we make sure the model actually learns to be correct? Are there enough experts in every field involved with the training of the models? I think this is one of the hardest problems we'll have to address, and honestly, I'm not sure if this can be fixed in any way.

Knowledge gap

There is also a risk that emerging technologies will widen the gap between the haves and have-nots. As AI and automation disrupt industries and create new jobs, there is a risk that some people will be left behind, lacking the skills and education necessary to participate in the new economy. This could lead to a world where a small elite holds most of the wealth and power, while the rest of society struggles to get by.

I recently heard someone talk about how AIs will wipe out software development jobs. It was suggested a Senior Developer will no longer have to rely on Juniors because he could just assign the tasks to AI code-generators and then review their code. My question would be: Where would those Seniors come from if there are no more Junior positions? How would anyone gain the experience and knowledge to properly assess the generated code?

Another problem with that might be that the lonely Senior Dev might be stuck with a suboptimal AI system for the tasks to be done. It would probably be harder to switch to a different system compared to having a pool of different people.

Source acknowledgement

AIs require transparency and accountability from those who are developing and deploying the technologies. There is often a lack of clarity around who is responsible for ensuring that emerging technologies are used ethically and responsibly, particularly in cases where multiple stakeholders are involved. The black box problem mentioned earlier does not make this any easier.

If we are not even able to describe how exactly a system comes to the result, how will we be able to acknowledge the sources? If the text is basically a string of the most probable words, how will we be able to acknowledge the source? But being able to assess the sources is important in today's and future world.

Technological feudalism

There is a concern that new technologies could lead to a new kind of feudalism, with a few powerful corporations and individuals controlling vast amounts of wealth and power. As data becomes the new oil, those who control it will wield immense power over society. There is also a risk of monopolies forming in key industries, stifling competition and innovation.

Final thoughts

The new developments in AI and Machine Learning offer both great promise and significant risks. It is up to us to ensure that these technologies are developed and deployed in a way that maximizes their benefits while minimizing their risks. This will require careful consideration of the ethical, social, and environmental implications of emerging technologies, as well as a commitment to inclusive and equitable development. By working together, there is some hope we can build a better future for all. But to be frank: I'm sceptical.

Acknowledgement: This article was written with the help of but not by ChatGPT.

React: Create a turnable knob component

Red Ochsenbein (he/him) — Mon, 13 Mar 2023 18:38:56 +0000

Because I want to learn more about the Web Audio API I started creating a modular synth using React.
One of the main components I knew I'd need was turnable knob. Let me go through the steps to create one.

If you like to see it in action go to https://synth.raven.ch.

Drawing the knob as an SVG

I used Affinity Designer to draw the Knob. The most important part is to split it into into two groups: the turnable knob and the markings.

After creating the SVG I took the code and turned it into a React component and added position prop which allows a value between 0 and 1 to set the position of the knob.

interface KnobMainProps {
  position: number
}
const KnobMain: React.FC<KnobMainProps> = ({ position }) => {
  const angle = Math.min(Math.max(0, position * 270), 270)

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlSpace="preserve"
      style={{
        fillRule: 'evenodd',
        clipRule: 'evenodd',
        strokeLinecap: 'round',
        strokeLinejoin: 'round',
        strokeMiterlimit: 1.5,
      }}
      viewBox="0 0 1024 1024"
    >
      <g>
        <path
          fill="none"
          d="M202.085 686.883C135.815 633.107 94.786 558.75 94.786 476.659c0-163.901 163.552-296.967 365.003-296.967 201.45 0 365.002 133.066 365.002 296.967 0 81.743-40.682 155.817-106.457 209.539"
          style={{
            fill: '#ebebeb',
            fillOpacity: 0,
            stroke: 'currentColor',
            strokeWidth: '13.2px',
          }}
          transform="matrix(1.35193 0 0 1.66166 -109.602 -280.045)"
        />
        <path
          d="m960 960-97.415-97.415"
          style={{
            fill: 'none',
            stroke: 'currentColor',
            strokeWidth: 20,
          }}
        />
        <path
          d="M164.09 859.91 64 960"
          style={{
            fill: 'none',
            stroke: 'currentColor',
            strokeWidth: 20,
          }}
          transform="matrix(.98664 .01336 .01336 .98664 -11.974 11.974)"
        />
      </g>
      <g style={{ cursor: 'pointer', rotate: `${angle}deg`, transformOrigin: '50%', transition: 'rotate 100ms' }}>
        <ellipse
          cx={459.789}
          cy={476.659}
          fill="none"
          rx={365.003}
          ry={296.967}
          style={{
            fill: '#ebebeb',
            fillOpacity: 0,
            stroke: 'currentColor',
            strokeWidth: '15.88px',
          }}
          transform="matrix(1.12427 0 0 1.38185 -4.929 -146.67)"
        />
        <path
          d="M512 512 223.86 800.14"
          style={{
            fill: 'none',
            stroke: 'currentColor',
            strokeWidth: 20,
          }}
        />
      </g>
    </svg>
  )
}

Creating the main component and add mouse wheel interaction

I wanted to be able to set the value using the mouse wheel. But first I needed to setup the component like this:

interface KnobProps {
  label?: string
  max: number
  min: number
  onChange?: (value: number) => void
  step: number
  value: number
}
const Knob: React.FC<KnobProps> = ({ label, onChange, value, step, min, max }) => {
  return (
    <KnobWrapper>
      <KnobMain position={position} />
      <KnobLabel>{label}</KnobLabel>
    </KnobWrapper>
  )
}

// I like styled-components
const KnobWrapper = styled.div`
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.8rem;
  position: relative;
  touch-action: none;
`

const KnobLabel = styled.div`
  text-align: center;
  margin: 0;
  margin-top: -0.5rem;
  font-size: 0.8rem;
  line-height: 1rem;
`

Then I needed to add the actual mouse wheel handler:

const Knob: React.FC<KnobProps> = ({ label, onChange, value, step, min, max }) => {
  const [value, setValue] = useState(inputValue)

  const handleMouseWheel = useCallback<WheelEventHandler<HTMLDivElement>>(
    (e) => setValue(e.deltaY < 0 ? Math.max(min, value - step) : Math.min(max, value + step)),
    [max, min, step, value]
  )

  const handleChange = useCallback(
    (v: number) => {
      onChange?.(v)
    },
    [onChange]
  )

  useEffect(() => {
    handleChange(value)
  }, [handleChange, value])

  return (
    <KnobWrapper onWheel={handleMouseWheel}>
      <KnobMain position={position} />
      <KnobLabel>{label}</KnobLabel>
    </KnobWrapper>
  )
}

The function handleMouseWheel extracts the property deltaY to determine in what direction the mousewheel is turned. Based on that it subtracts or adds a value up to the the set boundaries.
I use the useEffect hook in combination with handleChange to unify calling the onChange callback and setting the actual displayed value.

Adding mouse dragging interaction

The knob should be able to be turned by dragging the mouse. So, I had to implement some click and drag handling.

const Knob: React.FC<KnobProps> = ({ label, onChange, value: inputValue, step, min, max }) => {
  [...]

  const handleDrag = useCallback(
    (e: MouseEvent) => {
      e.preventDefault()
      setValue((prev) => Math.max(min, Math.min(max, prev + -e.movementY * ((max - min) / DRAGGING_DENOMINATOR))))
    },
    [max, min]
  )

  const handleMouseUp = useCallback(() => {
    document.removeEventListener('mousemove', handleDrag)
    document.removeEventListener('mouseup', handleMouseUp)
  }, [handleDrag])

  const handleMouseDown = useCallback(() => {
    document.addEventListener('mousemove', handleDrag)
    document.addEventListener('mouseup', handleMouseUp)
  }, [handleDrag, handleMouseUp])

  return (
    <KnobWrapper onWheel={handleMouseWheel} onMouseDown={handleMouseDown} >
      <KnobMain position={position} />
      <KnobLabel>{label}</KnobLabel>
    </KnobWrapper>
  )
}

When the mouse is clicked the onMouseDown callback attaches an event listener to document which allows us to intercept the events on dragging and mouseup wherever on the page the mouse is. The mouseup handler just removes those listeners again. The magic is happening in the dragging handler. Where we retrieve the mouse movement across the y axis and use it to calculate the new value.

Make it work on mobile, too

To make it work on mobile we need to intercept the touch events.

const Knob: React.FC<KnobProps> = ({ label, onChange, value: inputValue, step, min, max }) => {
  [...]

  const touchCoords = useRef<Coords | null>(null)

  const handleTouchMove = useCallback(
    (e: TouchEvent) => {
      if (!touchCoords.current) {
        return
      }
      const delta = touchCoords.current.y - e.touches[0].screenY
      touchCoords.current = { x: e.touches[0].screenX, y: e.touches[0].screenY }
      setValue((prev) => Math.max(min, Math.min(max, prev + delta * ((max - min) / DRAGGING_DENOMINATOR))))
    },
    [max, min]
  )

  const handleTouchEnd = useCallback(() => {
    touchCoords.current = null
    document.removeEventListener('touchmove', handleTouchMove)
    document.removeEventListener('touchend', handleTouchEnd)
  }, [handleTouchMove])

  const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(
    (e) => {
      touchCoords.current = { x: e.touches[0].screenX, y: e.touches[0].screenY }
      document.addEventListener('touchmove', handleTouchMove)
      document.addEventListener('touchend', handleTouchEnd)
    },
    [handleTouchEnd, handleTouchMove]
  )

  return (
    <KnobWrapper onWheel={handleMouseWheel} onMouseDown={handleMouseDown} onTouchStart={handleTouchStart}>
      <KnobMain position={position} />
      <KnobLabel>{label}</KnobLabel>
    </KnobWrapper>
  )
}

The idea is basically the same as with the mouse dragging events. The only difference is that we have to track the touch movement manually. To do this we use a ref, store the starting point and calculate the difference on the touchmove event.

That's it

And this is basically the whole magic of this knob component. At https://synth.raven.ch you can see it in action or you can go to Github to see the full component.

React: Switch background images when they are ready

Red Ochsenbein (he/him) — Thu, 08 Dec 2022 08:33:42 +0000

In an application I'm currently working on I needed a way to make sure the image is actually loaded before I put it into the background. How did I do that?

Actaully it's pretty simple: Create an image object, load the image - which then would be put into the cache - and when the image object sends the load event switch the image.

import React, { PropsWithChildren, useCallback, useState } from 'react'
import styled from 'styled-components'

import useWsMessage from '../hooks/useWsMessage'

interface BackgroundData {
  credits?: string
  url: string
}

const Background: React.FC<PropsWithChildren> = ({ children }) => {
  const [current, setCurrent] = useState<BackgroundData | null>(null)

  const handleMesssage = useCallback((event: MessageEvent<string>) => {
    const raw = event.data.replace('SetBackground ', '')
    try {
      const background: BackgroundData = JSON.parse(raw)
      const img = new Image()
      img.src = background.url
      img.onload = () => setCurrent(background)
    } catch {
      // do nothing
    }
  }, [])

  useWsMessage('SetBackground', handleMesssage)

  return (
    <BackgroundRenderer url={current?.url}>
      {children}
    </BackgroundRenderer>
  )
}

interface BackgroundRendererProps {
  url?: string
}

const BackgroundRenderer = styled.div.attrs<BackgroundRendererProps>(({ url }) => {
  return {
    style: { backgroundColor: 'black', ...(url ? { backgroundImage: `url(${url})` } : {}) },
  }
})<BackgroundRendererProps>`
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  bottom: 0;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
`

export default Background

As you can see the component retrieves a message from websocket and uses the URL to set the background image. The important part is this:

const img = new Image()
img.src = background.url
img.onload = () => setCurrent(background)

It creates an image object, sets the src and sets the background image state as soon as the image is loaded.

That's it. Pretty simple, huh? I hope this helps someone having a similar problem in the future.

React: Smoothly move the seconds hand of the analog clock

Red Ochsenbein (he/him) — Mon, 15 Aug 2022 08:12:00 +0000

In my last article about the analog clock I showed how I built it. The seconds hand is just jumping from second to second but I wanted to have it move smoothly.

The code for the seconds hand:

const Seconds = styled(Hours).attrs<DateProps>(({ time }) => ({
  style: { transform: `rotateZ(${time.getSeconds() * 6}deg)` },
}))<DateProps>`
  background-color: red;
  height: 50px;
  left: calc(50% - 0.5px);
  top: 5px;
  width: 1px;
`

First try

My immediate thought was to simply add transition: transform 1s linear; to the css.

const Seconds = styled(Hours).attrs<DateProps>(({ time }) => ({
  style: { transform: `rotateZ(${time.getSeconds() * 6}deg)` },
}))<DateProps>`
  background-color: red;
  height: 50px;
  left: calc(50% - 0.5px);
  top: 5px;
  transition: transform 1s linear;
  width: 1px;
`

That was it! Job done...

Unfortunately not.

At first it looked good until the hand moved from 59 seconds to 0. What happens with the calulation?

59 * 6 = 354
0 * 6 = 0

This means the hand does not move from 354 degrees to 360 degrees, but to 0 degrees. This means it runs backwards. One full rotation back to zero in 1 second. While this might be somewhat funny it is not what I wanted (or anyone would expect from a clock).

Also there is another small problem with this: The hand is one second behind. Think about it:
When we jump from position to position the hand is at the target position (the position of the current second) immediately. When transitioning within a second it starts at the previous second and takes a second to get to the current position. Anyways this could have been easily fixed by just adding 1 to time.getSeconds().

But we can do better.

Thinking about solutions

After jumping to the first solution that came to mind I started thinking about other possible ways to do this.

What if I just did not use time.getSeconds() but just Date.now()? It should get me the milliseconds since January 1st 1970. Dividing it by 1000 and using that should do the trick.

Unfortunately it's not that easy. The generated div looked like this:

<div class="sc-cxabCf bIucpB" style="transform: rotateZ(9.96329e+09deg);"></div>

The number was simply too big. Also I'm not sure if using something like 9963290976 degrees to start with might be a good practice.

Using the time delta

To calculate the difference bettween the start time and now I had to store the starting point somewhere. Since this should not change at all and it should not retrigger a rerender I am using a ref for this.

const DemoClock: React.FC = () => {
  const [time, setTime] = useState(() => new Date())
  const start = useRef(time)

  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date()
      if (time.getSeconds() !== now.getSeconds()) {
        setTime(now)
      }
    }, 250)

    return () => clearInterval(interval)
  }, [time])

  const seconds = Math.floor((time.getTime() - start.current.getTime()) / 1000) 
    + start.current.getSeconds() + 1

  return (
    <Clock>
      <Hours time={time} />
      <Minutes time={time} />
      <Seconds seconds={seconds} />
    </Clock>
  )
}

This works just fine. But one thing still bothered me. The degrees are growing larger and larger. I don't think this is a problem but I wanted to try a solution which does not need these large numbers.

Using the Web Animation API

I ended up doing this:

const DemoClock: React.FC = () => {
  const [time, setTime] = useState(() => new Date())

  const secondsRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date()
      if (time.getSeconds() !== now.getSeconds()) {
        setTime(now)
      }
    }, 250)

    return () => clearInterval(interval)
  }, [time])

  useLayoutEffect(() => {
    if (!secondsRef.current) {
      return
    }

    secondsRef.current.animate(
      [
        {
          transform: `rotateZ(${(time.getSeconds() * 6}deg)`,
        },
        {
          transform: `rotateZ(${(time.getSeconds() + 1 * 6}deg)`,
        },
      ],
      {
        duration: 1000,
        fill: 'both',
        iterations: 1,
      }
    )
  }, [time])

  return (
    <Clock>
      <Hours time={time} />
      <Minutes time={time} />
      <Seconds time={time}  ref={secondsRef} />
    </Clock>
  )
}

As you can see by defining the start and end of each step we never fall into the situation to have to move backwards. But also it allows us to change the time at any point without having the hand rotating like a maniac and we never need to use degrees larger than 360. To me this felt like the ideal solution.

What would your solution be? Did I miss something obvious? Let me know.

Photo by Ocean Ng on Unsplash

Typescript: It's not actually validating your types.

Red Ochsenbein (he/him) — Thu, 11 Aug 2022 20:11:00 +0000

Typescript is a nice thing: It lets you define types and make sure your classes and functions adhere to certain expectations. It forces you to think about what data you put into a function and what you will get out of it. If you get that wrong and try to call a function which expects a sting with a - let's say - number, the compiler will let you know. Which is a good thing.

Sometimes this leads to a misconception: I met people who believed typescript would make sure the types are what you say you are. But I have to tell you: Typescript does not do that.

Why? Well, Typescript is working on compiler level, not during the runtime. If you take a look at how the code Typescript produces does look like you'll see it translates to Javascript and strips all the types from the code.

Typescript code:

const justAFunction = (n: number): string => {
  return `${n}`
}

console.log(justAFunction)

The resulting Javascript code (assuming you are transpiling to a more recent EcmaScript version):

"use strict";
const justAFunction = (n) => {
    return `${n}`;
};
console.log(justAFunction);

It only checks if the types seem to be correct based on your source code. It does not validate the actual data.

Checking types

Is typescript useless then? Well, no, far from it. When you use it right it forces you to check your types if there are no guarantees ("unfortunately" it also provides some easy ways out).

Let's change our example a little bit:

const justAFunction = (str: string[] | string): string => {
  return str.join(' ') 
}

console.log(justAFunction(["Hello", "World"]))
console.log(justAFunction("Hello World"))

When compiling this will lead to the following error:

index.ts:2:14 - error TS2339: Property 'join' does not exist on type 'string | string[]'.
  Property 'join' does not exist on type 'string'.

2   return str.join(' ')
               ~~~~


Found 1 error in index.ts:2

The compiler forces to think about the type of the variable str. One solution would be to only allow string[] into the function. The other is to test if the variable contains the correct type.

const justAFunction = (str: string[] | string): string => {
  if (typeof str === 'string') {
    return str
  }

  return str.join(' ') 
}

console.log(justAFunction(["Hello", "World"]))
console.log(justAFunction("Hello World"))

This would also translate into Javascript and the type would be tested. In this case we would only have a guarantee that it is a string and we would only be assuming it is an array.

In many cases this is good enough. But as soon as we have to deal with external data source - like APIs, JSON files, user input and similar - we should not assume the data is correct. We should validate the data and there is an opportunity to ensure the correct types.

Mapping external data to your types

So the first step to solve this problem would probably be to create actual types to reflect your data.

Let's assume the API returns a user record like this:

{
  "firstname": "John",
  "lastname": "Doe",
  "birthday": "1985-04-03"
}

Then we may want to create an interface for this data:

interface User {
  firstname: string
  lastname: string
  birthday: string
}

And use fetch to retrieve the user data from the API:

const retrieveUser = async (): Promise<User> => {
  const resp = await fetch('/user/me')
  return resp.json()
}

This would work and typescript would recognize the type of the user. But it might lie to you. Let's say the birthday would contain a number with the timestamp (might be somewhat problematic for people born before 1970... but that's not the point now). The type would still treat the birthday as a string despite having an actual number in it... and Javascript will treat it as a number. Because, as we said, Typescript does not check the actual values.

What should we do now. Write a validator function. This might look something like this:

const validate = (obj: any): obj is User => {
  return obj !== null 
    && typeof obj === 'object'
    && 'firstname' in obj
    && 'lastname' in obj
    && 'birthday' in obj
    && typeof obj.firstname === 'string'
    && typeof obj.lastname === 'string'
    && typeof obj.birthday === 'string'
}

const user = await retrieveUser()

if (!validate(user)) {
  throw Error("User data is invalid")
}

This way we can make sure the data is, what it claims to be. But you might see this can get quickly get out of hands in more complex cases.

There are protocols inherently dealing with types: gRPC, tRPC, validating JSON against a schema and GraphQL (to a certain extend). Those are usually very specific for a certain usecase. We might need a more general approach.

Enter Zod

Zod is the missing link between Typescript's types and enforcing the types in Javascript. It allows you to define the schema, infer the type and validate the data in one swipe.

Our User type would be defined like this:

import { z } from 'zod'

const User = z.object({
    firstname: z.string(),
    lastname: z.string(),
    birthday: z.string()
  })

The type could then be extracted (inferred) from this schema.

const UserType = z.infer<User>

and the validation looks like this

const userResp = await retrieveUser()
const user = User.parse(userResp)

Now we have a type and validated data and the code we had to write is only marginally more than without the validation function.

Conclusion

When working with Typescript it is important to know the difference between compiler checks and runtime validation. To make sure external data are conforming to our types we need to have some validation in place. Zod is great tool to deal with exactly that without much overhead and in a flexible way.

Thanks for reading.

React: Create a simple analog clock

Red Ochsenbein (he/him) — Mon, 08 Aug 2022 05:29:00 +0000

I recently had to create a simple analog clock component for my React project. I now want to share how I approached it.

I built a React component drawing a clock face and three hands for hours, minutes and seconds. I used HTML with Styled Components to style the clock. Of course it could be done with SVG or drawing on a canvas. Maybe I'll explore those options later. For now I wanted to keep it simple and because we do only have 3 moving parts this might not be too much of a performance hog.

Let's start.

1. Create a clock face and style it

First we need to have the base component. It will do nothing yet except of drawing the clock face.

import React  from 'react'
import styled from 'styled-components'

const DemoClock: React.FC = () => {
  return <Clock />
}

const Clock = styled.div`
  background-color: white;
  border-radius: 50%;
  border: black 1px solid;
  height: 100px;
  margin-bottom: 0.5rem;
  position: relative;
  width: 100px;
`

export default DemoClock

This will create a round white background with a black border with a diameter of 100 pixels.

2. Add the hands

Now we add the hands. Let's just take the hour hand for example.

const Hours = styled.div`
  background-color: black;
  border-radius: 2.5px;
  height: 30px;
  left: calc(50% - 2.5px);
  position: absolute;
  top: 25px;
  width: 5px;
`

This will create a 30 pixels long black hand with rounded edges and a small overlap of 5 px in the center.

Let's take a look at some details here:

left: calc(50% - 2.5px);: This will move the hand to the center of the clock. The offset of -2.5px is because the hand is 5px wide, so we have to move it to the left by the half of its width.
top: 25px;: This will move the hand down by 25 pixels. 25 pixels because the radius is 50px and we want an overlap of 5 pixels. So radius - length of hand + overlap = 50 - 30 + 5 = 25.

Then we add the hand to the clock.

const DemoClock: React.FC = () => {
  return (
    <Clock>
      <Hours />
    </Clock>
  )
}

Repeat this for the minutes and seconds hand. My clock has now all three hands.

const DemoClock: React.FC = () => {
  return (
    <Clock>
      <Hours />
      <Minutes />
      <Seconds />
    </Clock>
  )
}

const Clock = styled.div`
  background-color: white;
  border-radius: 50%;
  border: black 1px solid;
  height: 100px;
  margin-bottom: 0.5rem;
  position: relative;
  width: 100px;
`

const Hours = styled.div`
  background-color: black;
  border-radius: 2.5px;
  height: 30px;
  left: calc(50% - 2.5px);
  position: absolute;
  top: 25px;
  width: 5px;
`

const Minutes = styled(Hours)`
  height: 45px;
  top: 10px;
`

const Seconds = styled(Hours)`
  background-color: red;
  height: 50px;
  top: 5px;
  width: 1px;
`

3. Make the hours hand displays the current time

Let's start with displaying the current hour. For this we add a time prop to the styled component to be able to feed it with any Date object.

We know that we have 12 hours on a clock, so we can calculate the angle of the hand for each hour by dividing 360 degrees by 12. This will give us 30 degrees per hour. There is a small caveat: getHours() returns up to 24 hours per day. So we have to make sure we only get 12 hours by using a modulo of 12.

interface DateProps {
  time: Date
}

const Hours = styled.div<DateProps>`
  ...
  transform-origin: center calc(100% - 5px);
  transform: rotateZ(${({ time }) => ((time.getHours() % 12) * 30}deg);
`

We also had to set the pivot point of the rotation to the center of the clock. We do this by setting the transform origin. By using calc(100% - 5px) we take care of the 5 pixel overlap of the hand.

Maybe you realize the hand is now jumping from one hour to the but does not move gradually. To achieve a smoother movement we have to do a little bit more maths.

We multiply the hours by 60 and add the current minutes to it. This way the value will reflect the current time in minutes. But now the angle of each unit is different. We do have 12 * 60 = 720 minutes in 12 hours, so we can calculate the angle of each minute by dividing 360 degrees by 720. This will give us 0.5 degrees per minute.

const Hours = styled.div<DateProps>`
  ...
  transform: rotateZ(${({ time }) => ((time.getHours() % 12) * 60 + time.getMinutes()) * 0.5}deg);
`

4. Repeat for the minutes and seconds

We add the rotation of the minutes and seconds hand in a similar way.

const Minutes = styled(Hours)`
  ...
  transform: rotateZ(${({ time }) => (time.getMinutes() * 60 + time.getSeconds()) * 0.1}deg);
`

const Seconds = styled(Hours)`
  ...
  transform: rotateZ(${({ time }) => time.getSeconds()  * 6}deg);
`

5. Update the time

Now we just have to add the time to the clock component. We can do this using a state containing the current time and a timer to update the time every second. Make sure the interval is cleared when the component is unmounted.

const DemoClock: React.FC = () => {
  const [time, setTime] = useState(() => new Date())

  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date()
      setTime(now)
    }, 1000)

    return () => clearInterval(interval)
  }, [])

  return (
    <Clock>
      <Hours time={time} />
      <Minutes time={time} />
      <Seconds time={time} />
    </Clock>
  )
}

One small thing to consider. When doing those updates each second, in the worst case the timer could be off by almost one second. Think about this. When the timer runs around 990 milliseconds after the full second, it would seem like being off by one second. Most of the time this is probably not an issue. But you have to think about the needed precision when dealing with time. Let's assume you're working on an auctions platform, then the timing might be quite important and even a second off might annoy some customers.

So, we might want to increase the resolution of the clock to 250 milliseconds or even lower (depending on your needs), but only update the state if the second has changed.

  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date()
      if (now.getSeconds() !== time.getSeconds())) {
        setTime(now)
      }
    }, 250)

    return () => clearInterval(interval)
  }, [time])

6. One more thing

While this works we created a potential problem. A problem that is rather specific to styled components. Styled components create a new class for each unique combination of props. This means that if you change the props of a component, the class will be recreated. This is a problem for performance. The solution is to use the attr() method.

const Hours = styled.div.attrs<DateProps>(({ time }) => ({
  style:{
    transform: `rotateZ(${((time.getHours() % 12) * 60 + time.getMinutes()) * 0.5}deg)`,
  },
})).<DateProps>`
   ...
`

Conclusion

We discovered that dealing with time brings certain challenges (we only scratched the surface though - thing's get pretty complicated as soon as you have to synchronize with a server, need precision and/or have to deal with timezones). But there it is: a working clock.

Take a look at the finished implementation in this gist.

You can go on and improve the clock: Try adding a day of month field, add indicators for the hours and try different hand designs using pure css or svg. The stage is yours.

That's it. I hope you enjoyed your time.

Animating HTML Elements Using FLIP

Red Ochsenbein (he/him) — Sat, 06 Aug 2022 12:34:00 +0000

In modern web apps you come across the need to animate HTML elements. Be it to visualize the transition between multiple lists, switching positions in one list, growing elements on selection, etc. There are many cases to make your app feel more 'flashy' by animating stuff.

While doing that you will notice that there will be some questions to answer. How do we deal with the element changing the DOM. When and how to initiate the animation. Should we clone the element or just reuse it. In no way I'm suggesting FLIP will just answer all those questions. But it will give you a good starting point to make the management of the animation a bit easier.

The trick is to not start with the elements starting position, but with it's final position. All this will get clearer as we describe what FLIP means:

FLIP stands for First, Last, Invert and Play and was coined by Paul Lewis.

First: The elements starting point. Gather this information from the DOM.
Last: The elements final position. Also retrieve this information from the DOM.
Invert: Calculate the transformation (scale, rotate, translate, etc.) from the first to the last position and reverse it. So if you have to animate 100px to the right, use -100px on the x axis. This will display your element at the same position as it was before.
Play: Start the animation. It will now transition from the reversed starting position to the current position. Nothing elese needs to be done.

Let's take a look at an example:

const flip = () => {
  // retrieve the block to animate
  const block1 = document.querySelector<HTMLDivElement>('#block1')

  // an array with 3 target elements
  const positions: Element[] = [
    document.querySelector('.middle'),
    document.querySelector('.end'),
    document.querySelector('.start'),
  ]
  let index = 0

  if (block1) {
    // animate the block on click
    block1.addEventListener('click', () => {
      // FLIP - First
      // retrieve the position of the block at its starting point
      const start = block1.getBoundingClientRect()

      // Move the element to its destination
      positions[index].appendChild(block1)

      // FLIP - Last
      // retrieve the position of the block at its final position
      const end = block1.getBoundingClientRect()

      // FLIP - Invert
      // Calculate the change from the start to the end position
      const dx = start.left - end.left
      const dy = start.top - end.top
      const dh = start.height - end.height
      const dw = start.width - end.width

      // FLIP - Play
      // Initiate the animation
      block1.animate(
        [
          {
            transformOrigin: 'top left',
            transform: `translate(${dx}px, ${dy}px)`,
            height: `${dh}px`,
            width: `${dw}px`,
          },
          {
            transformOrigin: 'top left',
            transform: 'none',
          },
        ],
        { duration: 400, fill: 'both', easing: 'ease-in-out' }
      )

      index = (index + 1) % positions.length
    })
  }
}

When playing with FLIP you might run into some problems though:

When scaling the elements it can get pretty hard to deal with rounded borders.
Rotating element is not as easy as it sounds.
Dealing with multiple animations can be rather tricky.
Sometimes you don't want to change the elements width or height, but rather use the scale transformation. But this will make it harder to deal with rounded borders or font-sizes, etc.

Anyways, there is a nice GSAP plugin awailable to deal with those issues and more.

Photo by Liam Shaw on Unsplash

React Query: How to organize your keys

Red Ochsenbein (he/him) — Mon, 01 Aug 2022 09:11:00 +0000

If you're using React Query you certainly know how the useQuery hook works. Some example similar to the ones you find in the React Query documentation.

// a simple string.only key
useQuery('todos', ...)

// an array key
useQuery(['todo', id], ...)

// other, more complex keys
useQuery(['todo', id, 'comments', commentId], ...)
useQuery(['todo', {id, type: 'comments', commentId}], ...)

These keys are used to identify a specific query and is most important in combination with react query's caching mechanism. It allows react query to fetch the same query only once even if it is called multiple times in various components, and it identifies the cache to be used when fetching again or invalidating the cache.

In larger applications you'd have to make sure the keys are identical in all components or hooks using the same query or even more important if you want to invalidate the cache (aftera mutation, for example).

The react query documention does not provide a solution to this problem. My solution for this is pretty straightforward. By creating an object with a key and query function for each query.

const todoQuery = {
  key: (id: string): ['todo', string] => ['todo', id],
  query: (id: string): Promise<...> => {... fetch the todos ...},
}
export default todoQuery

Using useQuery would then look like this:

const { data, isLoading } => useQuery(todoQuery.key(id), () => todoQuery.query(id))

I think this is a simple but effective way to make sure the keys are always the same. Even when the keys need to change for some reason, you always alter them for all the places they have been used.

Photo by Joshua Aragon on Unsplash