Forem: Frederik 👨‍💻➡️🌐 Creemers

Are tag follows not used for the home page feeds?

Frederik 👨‍💻➡️🌐 Creemers — Mon, 08 Sep 2025 02:29:46 +0000

I've admittedly been a lot les active on dev.to for a while, and so a lot of the people I follow are old accounts who no longer publish much content on dev.to, if any. So when I go to look at my home feed, both "Discover" and "Following", most of what I see are posts from the DEV team.

I do, however, follow a fair number of tags, ranging from various programming languages, to #explainlikimfive and similar. Those do still get some activity, but I'm not seeing any of their posts on my home feed. Are they not considered? When I look at the top 7 posts overview, I do see that there's still some great stuff being published to the site, but I don't really have a good way to discover it, other than those posts right now.

Look & Learn: a Google AI Multimodal Challenge Entry

Frederik 👨‍💻➡️🌐 Creemers — Sun, 07 Sep 2025 21:50:37 +0000

This is a submission for the Google AI Studio Multimodal Challenge

What I Built

I created Look & Learn, a daily challenge app for language learners. Each day, one new image is generated, and for every language and skill level, a équiz is created. You can always go back and play quizzes from earlier days, and if a quiz for that day doesn’t exist yet, it will be generated when you first try it. You can also see which days you've already played, so you can get a streak going!

The app will then ask you some questions about the image, in the language you’re trying to learn. For beginners, all the questions are multiple choice. For intermediate and advanced levels, you’ll have to type out your answers.

Demo

Try Look & Learn here

Screenshots:

Screenshot from an intermediate level Dutch quiz:

How I Used Google AI Studio

I wanted to see how far I could take Google AI Studio while touching the code by hand as little as possible. While I'm mostly skeptical of vibe coding, I thought this challenge was an interesting opportunity to give it a try. So, I mostly wrote prompts, and would give the model feedback in natural language.

Multimodal Features

At the start of each daily challenge, the application always uses the image for that day, generating it if it doesn’t exist yet. That image is then the basis for all the quizzes created that day.

Gemini-2.5-flash is used to generate questions about the image, with prompts that include guidelines for the questions as well as the user’s fluency level. For multiple choice questions, the correct answer is clear and immediate feedback is given. For text entry questions, the user’s response is sent back to Gemini-2.5-flash to evaluate correctness and provide grammar and vocabulary feedback.

Finally, the image is also passed to Gemini-2.5-flash to generate an alt text. This description contains all the information needed to answer the quiz questions, but it’s provided in the learner’s native language so that they still have to make the effort of translating and connecting the details. I’ve also made sure that any text in other languages is wrapped with the correct lang attribute, so screen readers pronounce them properly.

Would you like me to also add a short line in the “What I Built” intro (something like “This way, the community is sharing the same daily challenge”) to highlight the communal aspect, or do you prefer to keep it focused just on the learner’s experience?

Any tips for making Google AI studio keep existing functionality?

Frederik 👨‍💻➡️🌐 Creemers — Sat, 06 Sep 2025 20:59:38 +0000

I'm noticing that as I ask AI studio to add features to my app, it sometimes breaks existing ones. Other than maybe being more specific as to how exactly to implement a feature, is there a way to have it ensure that existing functionality I specified in previous instructions keeps working?

Any good resources on diversity in tech in Europe?

Frederik 👨‍💻➡️🌐 Creemers — Tue, 16 Mar 2021 15:35:46 +0000

It seems like a lot of discussions and initiatives around diversity in tech I see online are quite US-centric, and I think there's an important local aspect to diversity, where every region's population is different, as are the issues minorities are facing. Are there job boards like Diversify Tech that have a European focus? Are there any relevant groups or people to follow?

I'm asking about Europe because that's where I live and work, but I think it might be useful to share resources for other regions as well.

Using React Portals in TalkJS HTMLPanels

Frederik 👨‍💻➡️🌐 Creemers — Fri, 25 Sep 2020 11:45:05 +0000

What are HTML Panels?

TalkJS provides an easy way to add chat functionality to your website, with a nice pre-built user interface that you can customise. But sometimes, you want to add a bit of your own UI to the chat. TalkJS is rendered inside an iframe, so you can't edit the DOM directly, but we have a feature called HTML Panels that lets you load your own web page in a panel above the message field. It lets you do things like this:

The email form you see there is rendered in an HTML panel.

What are React portals?

Portals are a way for a React component to render its children in a different DOM node.

function MyComponent(props) {
  return ReactDOM.createPortal(
    <p>Hello</p>,
    document.getElementById("someOtherElement")
  );
}

You can pass anything that's renderable by React to createPortal, including props.children.

Combining Portals with HTML Panels

So let's say you're writing a Chatbox component, and you want it to render a TalkJS chatbox, and you want it to contain an email form like above, but you'd also like that form to be part of your main React application.

To start, let's have a look at what the Chatbox component might look like. I'm assuming that a Session and ConversationBuilder object are passed as props. Read our Getting started guide to find out how to set these up.

class Chatbox extends React.Component {
  constructor(props) {
    super(props);
    this.chatboxContainer = React.createRef();
  }

  componentDidMount() {
    this.chatbox = this.props.session.createChatbox(this.props.conversation);
    this.chatbox.mount(this.chatboxContainer.current);
  }

  render() {
    return <div ref={this.chatboxContainer}>
    </div>
  }
}

Now let's add a HTML panel to hold our email form. First create an HTML file that just contains a div to hold our HTML Panel contents.

<div id="panelContent"></div>

Save it somere so that it is served from the same origin as your React application.

Next, we'll update our Chatbox component. First, we'll add a panelReady flag in our state.

constructor {
  super()

  this.state = {
    panelReady: false
  };

  this.chatboxContainer = React.createRef();
}

Then, create the HTML inside componentDidMount:

componentDidMount() {
  const chatbox = this.props.session.createChatbox(this.props.conversation);
  chatbox.mount(this.chatboxContainer.current);

  const panelPromise = chatbox.createHtmlPanel({
    url: "path/to/file.html", // Should point to the file created above.
    height: 300,
    show: true
});

  panelPromise.then((panel) => {
    panel.DOMContentLoadedPromise.then(() => {
      this.setState({
        panelReady: true,
        panelNode: panel.window.document.getElementById("panelContent")
      })
    });
  });
}

And then it's time to render the portal when the panel is ready. Update the Chatbox's render method like this

render() {
  return <div ref={this.chatboxContainer}>
    {this.state.panelReady && ReactDOM.createPortal(
      this.state.panelNode,
      <EmailForm />
    )}
  </div>
}

EmailForm can be any component you like, and it works just like any other React component, even events bubble from the EmailForm to your Chatbox component.

If you run into any issues, feel free to get in touch via the popup on our website or send an email to dev@talkjs.com

Happy coding!

Where do you draw the line between data structures and abstract data types (ADTs)

Frederik 👨‍💻➡️🌐 Creemers — Wed, 15 Jul 2020 12:06:20 +0000

I wanted to write an article on this distinction because I think it's a useful one, but as I thought this through there are areas that are still a bit vague to me too.

What is an Abstract Data Type (ADT)

An ADT is like an interface in object oriented languages, but it also includes semantics of what these operations do.

So for example a Stack is an object that has push and pop operations for pushing data onto it and popping data off, with first-in-last-out (FILO) semantics, meaning that items are returned by invocations of pop in the reverse order they were pushed.

This says nothing about how the data is stored internally. It could be a linked list, it could be an automatically growing array, or whatever other representation you like.

Where do you draw the line

But I'm not sure where you draw the line. For example, a linked list could be seen as an ADT where each list item has a next operation that yields the next item in the list. But then it's also a data structure as it describes structured data with pointers pointing to the memory address of the next item.

Come to think of it, maybe the most useful conclusion is that there is both a linked list ADT and a linked list data structure. Because you could implement the linked list ADT with an array, even though that wouldn't be very useful.

Why don't database systems have built-in mechanisms for avoiding locks while migrating?

Frederik 👨‍💻➡️🌐 Creemers — Fri, 03 Jul 2020 12:57:11 +0000

As your app or website becomes popular, it becomes tricky to do database migrations that alter columns without downtime. You basically have to create a new table or column, copy all the data over, and then drop the old version.

Is there any reason why database management systems couldn't do this themselves in many cases? When changing a column's type, why doesn't the database create a new column behind the scenes, write all new values there, while copying old values over in a background process?

Could Documentation Screenshots Be Part of the Build Process?

Frederik 👨‍💻➡️🌐 Creemers — Fri, 12 Jun 2020 14:13:16 +0000

I was listening to an episode of Codepen Radio where part of the discussion was how hard it is to keep videos and screenshots in the docs up to date.

So I started wondering. End-to-end tests always go through the same steps to test whether your product works. Could taking screenshots be part of that process? This way, the screenshots always represent the latest version of the app, and if an e2e test breaks, you know you may also need to update the docs about that part of the app.

Dev Humor in a Pandemic

Frederik 👨‍💻➡️🌐 Creemers — Wed, 08 Apr 2020 07:53:05 +0000

During a conversation in Slack

Is Anyone Using Server-Sent Events?

Frederik 👨‍💻➡️🌐 Creemers — Thu, 19 Dec 2019 08:41:11 +0000

A lot of websites are using websockets for real-time communication with the server, even applications that don't need the 2-way communication. Is there a advantage to using Server-Sent Events instead of websockets when you only need one-way communication?

What IOS shortcuts are you using?

Frederik 👨‍💻➡️🌐 Creemers — Mon, 30 Sep 2019 17:31:49 +0000

IOS 13 brought a bunch of powerful new features to ths shortcuts app. How are you using them?

Who are some good techies to follow on Twitter for cool/fun(ny) stuff?

Frederik 👨‍💻➡️🌐 Creemers — Sun, 15 Sep 2019 17:06:50 +0000

I believe I follow a fairly diverse group of people on Twitter. That way, it helps me understand the perspective of different people in the community. But lately I've felt like twitter has only been showing me what's bad and unjust.

So I'd like to follow some people who regularly post cool or funny stuff, to brighten up my twitter feed a little.

Some examples:

Cassidy Williams posts these wonderful little videos every once in a while:
// Detect dark theme var iframe = document.getElementById('tweet-1172570005986086913-842'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1172570005986086913&theme=dark" }

Julia Evans makes these explanatory cartoons that teach me new stuff in a quick, visual way:
// Detect dark theme var iframe = document.getElementById('tweet-1172872684327383040-316'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1172872684327383040&theme=dark" }