Possible strategies in creating a web based editor

An article, posted about 3 hour ago filed in web, editor, wysiwyg, online & canvas.

This may not be the complete list of possible strategies, but this is my own documentation of a short exploration.

textarea

One of the simplest form of "editors" is the plain textarea. Sometimes enriched by Javascript, adding snippets of text to assist more complicated markup styles (e.g. select text, and make it bold by surrounding it with a double asterisk (in case of markdown)).

Advantages:

  • robust
  • simple

Disadvantages:

  • No advanced markup (and/or relies on e.g. markdown, which is nice, but not for everyone)

By offering a preview of the markup, the disadvantage can be mitigated to some extend.

More information: MDN on ``

It is possible to position autocomplete helpers when the entry font is of a fixed type; as you can find the position of the caret within the text (using [selectionStart (on MDN)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/…

Continue reading...

De eerste vier zaken op een (macOS) ontwikkelmachine voor beginners

An article, posted almost 6 years ago filed in development, help, macos, system, configuration, php, python, ruby, vscode, sublimetext, editor, docker & homebrew.
  1. Update eerst naar de laatste versie van ’t OS, Mojave. Je kunt deze gratis downloaden in de App store, zie upgrade instructies voor Mojave.
  2. Installeer homebrew … macOS Terminal (zeg maar de Command Prompt van de Mac) vind je door Cmd+Spatie in te drukken en vervolgens "Terminal" te zoeken (meestal vind je die al na de eerste paar letters). Vervolgens de regel invoeren (kopiëren & plakken) die de website vermeld. Soms moet je extra dingen installeren; het script zal je daar doorheen leiden. Overigens, dat commando, Cmd+Spatie, opent wat Spotlight heet, ik vind dat de gemakkelijkste manier om programma’s te starten.
  3. Install Docker for mac (je hebt hier tegenwoordig helaas een account bij DockerHub voor nodig). Dit download een DiskImage, sleep het programma naar de programma’s map (zoals het image waarschijnlijk ook al aangeeft in de achterg…

Continue reading...

Delay your decisions

An article, posted more than 6 years ago filed in agile, design, project, keycloak, json, editor, visualisation, visual & graphing.

I design very little upfront. Sometimes I need to make an estimation, I design a little more. Sometimes the project is hardly specced and there is a lot of exploring to do.

In this post I would like to give a demonstration of how a recent project developed.

Initial stage

> Client: “We want a fancier frontend for our data”.
> Me: “Sure, any limitations?”
> Client: “We give you 4 months”
> Me: “Can I use any tech I want?”
> Client: “Na, we want to be able to continue on what you’re going to create, so please use P, X, Y and/or Z.”
> Me: “Sure, P is not my favourite, but some time ago I’ve dealt with it, so ok, we keep it simple anyway.”

The plan that followed:

Initially I thought I could fancy up the CSS, but the old product was in a very bad state and not really maintainable. So I decided to create a thin API layer in P (yes of PHP), a modern front-end layer in JavaScript using a framework that I co-introduced in the organisation a few years ago (R…

Continue reading...

murb blog