Ein Baum und seine Abenteuer



devbaum

Address Custom GPTs as "you"

Custom GPTs
Custom GPTs

You should address your Custom GPT as "you" while giving it instructions.

DO: you are an expert in XYZ that helps users by…

DO NOT: I am an expert in XYZ and help my users by…

DO NOT: Act as an expert in XYZ and help users by…

The why

The initial instruction set to Custom GPTs starts with (Dec 2023):

Give your Custom GPT a goal

Custom GPTs
Custom GPTs

GPTs expect to be given a goal. You will get the most out of a Custom GPT by providing it with one.

Do this

An easy way to leverage this is to include a section in your prompt that looks a bit like this:

## Goals

- Goal 1 explained
- Goal 2 explained

The why

The initial instruction set to Custom GPTs starts with (Dec 2023):

Technical debt and dirty dishes

Technical Debt is a lot like doing your dishes.
Technical Debt is a lot like doing your dishes.

Working with Engineers you probably heard the term "Technical Debt". But what is this "debt" Engineers keep referring to? Just an excuse to push features further out? Join us on a journey to understand what Technical Debt has to do with doing your dishes and paying back your student loans.

Trying my hands at Deno v1.0

Denos awesome Dinosaur logo.
Denos awesome Dinosaur logo.

Following the release of Deno v1.0 I got excited to try my hands at it. These are my first experiences writing a simple tool in Deno.

A super fast introduction to Deno: Deno is the spiritual successor of Node trying to fix design mistakes that were made early on but recognized only late into the project. Deno supports TypeScript out of the box and relies on web-standards. In Deno you can import ES modules from any URL and use fetch like you would in the browser. To help unify the community on processes and workflows Deno provides a wide array of stdLibs and has build in solutions for bundling, testing and code formatting. You can read more in the Deno v1 release post.

Log to Elasticsearch using curl

Good old tools can do amazing jobs.
Good old tools can do amazing jobs.

Once you get a centralized logging solution like Elasticsearch setup you open up an incredible amount of possibilities. That is if you actually send logs to your central place. On a recent project, we wanted to "just log our deploys from the Jenkins Server". Thus we set out to find the "easiest" way to log to our Elasticsearch. We finally reached curl as our solution and today I will walk you through how to do that.

Utilizing ESLint rules to format JavaScript in VS Code

Let's add some style to our code, like color to a canvas, just easier.
Let's add some style to our code, like color to a canvas, just easier.

Today we will take a quick look at how to configure VS Code to automatically format your code according to your ESLint rules every time you save a file.

This assumes that you already have some ESLint rules in place. If not the airbnb rules are a good place to get you started.

Automate click-through testing with Puppeteer

Today we will test websites as real users would.
Today we will test websites as real users would.

Testing is one of the essential steps in software development. Yet, testing and especially manual testing that clicks through the application is a tedious job that we often shy away from. But it doesn't have to be. With great tooling coming out over the past couple of years we now have what it takes to automate click-through testing in our build process. In this post, we will look at why manual or click-through tests are important and how to turn this tedious and bothersome task into a fun one that drives our development forward.

Go based proxies for developing mobile websites on corporate WiFis

When networks become a show stopped for development.
When networks become a show stopped for development.

You might know this scenario:

We would really love to debug the web-app on an actual phone but they way our corporations WiFi is set up just won't allow it…

If you do, stay tuned because in this blog post we will examine how we as developers can handle tightly secured WiFi Networks and still get all the connectivity we need.

Dockerizing modern web apps

These days everything is shipped in containers, even software.
These days everything is shipped in containers, even software.

Most websites these days are Single Page Applications (SPA for short) where a single entry file handles all routes that a user might visit. Swept up in the ongoing trend of hosting in the cloud you might find yourself needing to “dockerize” your SPA. That is to say wrap it inside a Docker image and run it as a container.

How I fell in love with an API-first CMS

Falling in love - Image by Contentful
Falling in love - Image by Contentful

The CMS (Content Management System) was one of the first building blocks of the content driven web. The CMS marked the move away from hardcoded HTML pages, and towards our modern web in which everyone has become a content creator. They are great for businesses because the competence of building websites and managing content could not only be split in theory, but also in practice. With a CMS, we can update our website on the fly — so there is really no justification for not using a CMS.

Contentful import to a different locale

After my recent undertaking to migrate a blog from Wordpress to Contentful I was also faced with the challenge to import content to a Space that had a different locale than the Space it was exported from. This came about after we setup a "base" space for our Product that is supposed to be rolled out in multiple countries.

Wordpress to Contentful migration

Lets go on a journey.
Lets go on a journey.

Contentful is one of the most prominent headless CMSs at the moment. As such it provides you all the content management capabilities of traditional tools like WordPress while decoupling the delivery of this content via an API that can be used to retrieve content.

Headless CMS are quickly turning from the new kid on the block intro everyone's favourite. And I totally understand why: it makes thinking about building a frontend so much easier, for once you actually know what is happening and we have great separation of concerns. For me as a webdev this is great stuff!

Deploy a hexo blog from Github using Travis

Read on 😉
Read on 😉

Straightening a lot of things out at the moment I got stuck with my blog.

This should be about the fourth blog I have run in my life. And so far the longest standing one. Mainly thanks to my stay in China. And it has gone through multiple stops so far.

First it was a wordpress powered blog hosted on my webspace at der-grüne-baum.net. That rapidly turned into a maintenance nightmare of "Wordpress needs a security update". So in September of 2015 I took a look around for alternatives and found Hexo. A Node based static blog generator. Technology wise totally my thing and static means pure HTML files without so much security stuff going on. So I switched to Hexo at first uploading by hand via FTP. Last year while I stayed in China the manual upload didn't work so great anymore. The connection just didn't take it. So I moved my blog to GitLab. They had native support for Hexo based sites. I never managed to get the domain moved to there however. So now in 2017 I set out to go for the new domain hoverbaum.net and have it there.

Invert strings

Getting close to finishing my Masters I recently started to interview for employment opportunities. As I have a Computer Science background this involves doing some programming. After all potential employers want to find out if I can code. These practical tests need to be short yet tell you something about the applicants skill level. One challenge I faced was to invert a string. And as JavaScript is my favorite programming language here are four way to do that in JS.

React 1 - Hello React

We are going on a big adventure.
We are going on a big adventure.

This is the beginning of a more detailed introduction to building React based applications. For those looking for a super fast introduction refer to my other blogpost. Todays goal is to get a basic component up and running, transpile the JSX and ES6 and finally the the result in our browser.

Building Electron based applications using CIs

BlankUp, my first Electron based application
BlankUp, my first Electron based application

One of the new cool kids on the block of webdev is Electron. With it we can build native apps using what we are best at: websites.

Electron simply wrappes websites to create native applications for Windows, Linux and Mac. Sounds wonderful, right?

Ohh yes and it is a lot of fun building something with Electron. Until one fine day you think you are done and want to "publish" your work. Well here it gets really rough. At least it got for me, so let me tell you my story and get you started.

ES6 need to know

Let us take a good look at this thing they call ES6.
Let us take a good look at this thing they call ES6.

ES6 is out, browser support is actually decent and if that is not enough for you there is always Babel. So lets get up to speed with the most important and awesome new features.

Let there be Const

Scope in JavaScript come unfamiliar to most. Because we have a thing called "variable hosting" that pulls all variables out and defines them at the top of their Scope. Their Scope being either the global one or the first surrounding function. The classic example here is a for loop.

Why and how to ReactJS with Redux

Redux helps you to stay organized.
Redux helps you to stay organized.

The newest revolution in Frontend-Development is React a "JavaScript library for building user interfaces". It rides on the current trend of doing things more functional. With React comes on of these moments where we all ask ourselves:

Why haven't we always done it like this? it is so obvious now!

Running a blog in China

Chinas great wall didn't cause me trouble but the great firewall did.
Chinas great wall didn't cause me trouble but the great firewall did.

Reader of my adventures in China beware! This post is in English and will get technical. You have been warned.

Turns out running a blog in China is not the easiest thing. Well actually running a blog in itself is quite some work but that is a different topic.

Extending Brackets

For some time now Brackets has been my Editor of choice for web projects.

For those of you who don't know it. It is a HTML5 based editor. Using it you develop with the web, for the web. Alongside many great features like quick edit for styles and just generally being awesome to code HTML, CSS and JavaScript the thing that makes me really love it is it's live preview that can show you in real time how your changes to your code will look. With the new 0.42 Version Brackets now supports Designs, or Themes if you want to call them that. Due to that I revisited my Plugins and thought I would share what I am using.

Object-oriented JavaScript

Attention: This is kinda "old" and I personally now consider this to bad style so I won't make the effort to reformat this after moving from Wordpress to Hexo.

This Tutorial strives to enable you to build object oriented applications in JavaScript. Another goal of mine is to give you a deeper understanding of the language and principles at work. If you just want som code to copy-past and understand it while you got refer to section 7.

Dodge-JS

dodge-js logo
dodge-js logo

One thing I had to learn is called require.js, there will be a blog post about it soonish. To get that down I wrote a little game. I call it Dodge-JS. You are a little block and have to dodge falling blocks. Some kids really liked it so I also implemented a leader board. Give it a try. I am warning you though, you may get addicted.

Introducing MusicHub

MusicHub is a website I have been working on lately.

I started it after joining DiscussionHub, a friendly general discussion forum. I wanted to make something for all members and so I came up with the concept for MusicHub. The idea is to have an easy to use and minimalistic music player on the web. A website you can visit and listen to some good music.

How to work without jQuery

Content:

  1. The History of jQuery

  2. What you can do without jQuery

    1. $ - Querying for elements
    2. .each - Work with elements from a list
    3. Manipulating elements
  3. The big difference

  4. Ease of use

  5. The bottom line

Many Webdesigners and developers today use jQuery for their website and web apps. The fact is: you probably don't need it. To understand what you can do faster and better without jQuery let us first take a look at what jQuery is. Once we have an understanding of jQuery I will go on to teach you how to replace many commonly used functions of jQuery with faster ones.

Where to go next