Lightbox? Gallery? Custom Popup Design

Hello, we love the feel of this site –

We are looking to try to figure out what exactly is it that they are using on the home page, if you click on one of their projects, it pops up a full screen page with a background for that project and information/video… acts like a Lightbox but aren't lightboxes only for Images?

What are they using here and is there a WordPress Plugin that is similar to do this?

modularization – What design pattern we call for a kind of general purpose template based editor supporting many development framework

I am halfway through developing a general purpose editing tools which once finished can be used to develop any application project as well as making a simple document file. I call it a general purpose rapid templating and editing system. As for now it is a cloud service. Have no yet any plan to convert it into a native application.

How does it works?

There is a middleware system where middle user may use to build a template that specifically supports a type of project or a document format. For example, they can build a template represent an application development project, a design project, a website framework, a content management system, or even a document format like HTML, PDF, office document, and etc. I’m also provide support for a programming language of my own to be included for more complex functionalities. A template can also be built derived and extended from a base template.

On the other end, end user who actually need the system may use it to create whatever kind of stuff they want as long as required template is there, already developed by middle user. For example let say they need to create an e-book in EPUB file format, the system will serve as an alternative EPUB editor specifically for files structuring or editing. They only need to choose a template, following the rules set for the template, provide all required details into a form, attach chapters HTMLs and image files, and put them all together into a project directory before submit it. System will compile it and generate an EPUB file. The same process goes to other projects or files.

It’s like modularizing a project development into two parts, templating and creating a project, allowing users to not doing much repeating programming task or no programming at all, as well as avoiding users from complex files structuring and installation. If you’ve learned about a Turing complete notation technique called Backus-Naur form which is used to build any programming language, yes I’ve made it capable of doing that too.

It is quite a useful tool at least for me. That makes me wonder. I was looking everywhere for something similar to what I am building in hope it was already exists so no need for me to reinvent it. But so far I’ve found nothing similar perhaps because I don’t know what terms to use to search for it. So actually I just want to know whether I’m building something new, or something already exists and wasting time reinvent it. What terms we use to search for it? What’s it called?. Any examples?. If no one ever built it before, then why is that?

design – Validity of using Event Sourcing only on Invoicing system

To set some context, we have a telco system that contains multiple parts. Lets say we have Subscription, SMS Messaging, Voice Messaging, Charging, User, and Invoicing.

Each of this have their own data store and logic. Some of these services listens to each other’s events and triggers some action. So we practice some event driven stuff here, but not really event sourcing.

The Invoicing system had a requirement of tracking all charges in the system and building an invoice off them. Since Invoices are time sensitive, we have to precisely know what charges we should include in a month’s invoice.

enter image description here

We realized we need to do some event sourcing for it. Storing all Charge related events in an event store, so the Invoice service can build off those Events. In our system, the subscription service, SMS, Voice services cause charges. This means they would all push charge events in the Event store.

Does this design makes sense? Any inputs/suggestions is appreciated.

game design – How to make attention grabbing notifications?

The notifications fade into the screen (…)

Don’t do that. Making them appear suddenly would catch more attention.

With that said, motion is probably a good idea. You can make the notification slide in the viewport.

Another thing to try is to have a sound effect associated with it. As long as it does not bothers the players too much.

We could argue for other stuff to draw more attention to it, however, we would be into annoying territory.

How exactly do you design your tutorial? Usual wisdom is to stop the player until they perform whatever they are supposed to learn (be it from following instructions or figuring it out by themselves). Then again, over do it with the notifications, and you are in hand holding territory (notifications says do x, then do y, and so on).

For example, if you need to teach how to break objects. Put breakable objects blocking the way. A good pattern is to:

  • Provide a safe space for the players to try out the mechanic.
  • Place some obstacle that can only be surpassed with the mechanic.
  • Give the player more advanced challenges involving the mechanic.
  • Give the player challenges that involve using the mechanic in conjunction with others.

Plan ahead how you would do that for every mechanic you introduce. In fact, your tutorial does not need to look like a tutorial. Nor be front loaded. You can spread it out, and teach mechanics as the player unlocks them.

If players are having difficulties with learning the mechanics, consider working on the mechanics to make them more intuitive (see the concept of Affordance). In fact, some hints can be useful. For example have some way to highlight objects with which the player can interact with (perhaps that can be disabled via menu). Which reminds me of assist mode, but that is another tale.

gui design – How can I best display a blank space character?

To represent a space bar of a keyboard, U+23B5 Bottom Square Bracket (normal ⎵ bold monospace ). As alternative, U+2423 Open Box (␣). In HTML parlace, ⎵ and &blank, respectively. To represent spaces in text use the interpunct, U+2E31 Word Separator Middle Dot (⸱) or U+00B7 Middle dot (·) as alternative.

Mind repetition and other punctuation:

  • U+2E31: ⸱⸱⸱⸱Four⸱spaces⸱before,⸱now⸱⸱two,⸱one⸱at⸱end.⸱
  • U+00B7: ····Four·spaces·before,·now··two,·one·at·end.·
  • U+23B5: ⎵⎵⎵⎵Four⎵spaces⎵before,⎵now⎵⎵two,⎵one⎵at⎵end.⎵
  • U+2423: ␣␣␣␣Four␣spaces␣before,␣now␣␣two,␣one␣at␣end.␣

Monoespaced works better:

  • U+2E31: ⸱⸱⸱⸱Four⸱spaces⸱before,⸱now⸱⸱two,⸱one⸱at⸱end.⸱
  • U+00B7: ····Four·spaces·before,·now··two,·one·at·end.·
  • U+23B5: ⎵⎵⎵⎵Four⎵spaces⎵before,⎵now⎵⎵two,⎵one⎵at⎵end.⎵
  • U+2423: ␣␣␣␣Four␣spaces␣before,␣now␣␣two,␣one␣at␣end.␣

For space bar, U+23B5 Bottom Square Bracket, HTML ⎵ ( ) is way to go. It’s a symbol utilized in keyboards and virtual keyboards of cell phones, but has low font coverage. U+2423 Open Box, HTML &blank (␣) was better supported, looks better with other punctuation but is ugly in isolation: vs .

Visual representation of spaces in text are more diverse beast. In the old days of console, manuals represented spaces as a combination of b and a slash (/). There is a Unicode for that, U+2422 Blank Symbol (␢), but without the same impact of the former representation in most fonts. But the old look or new not help much. Using overlays to simulate the old ways and U+2422 directly:

A modern solution is to use the U+2E31 Word Separator Middle Dot (⸱) or U+00B7 Middle dot (·). The first is advisable, the second has broad font support.


  • A⸱pretty⸱good⸱job⸱of⸱displaying⸱spaces. (U+2E31)
  • A·pretty·good·job·of·displaying·spaces. (U+00B7)
  • A⸱pretty⸱good⸱job⸱of⸱displaying⸱a⸱space. (U+2E31 mono spaced)note
  • A·pretty·good·job·of·displaying·spaces. (U+00B7 mono spaced)

For historical notes, usages and more alternatives, see and (buried in Overview/Definition and ambiguity/Unicode/Substitutes).

If I understand correctly, your application is displaying text as keystrokes (or text and special keys). If so, with U-2423:

With U-23B5:

note In some mono spaced fonts, it’s a glyph of different width!

design – What is a good pattern for passing a list of constant strings to front-end via GraphQL

This is using Python and the Graphene library.

I want to provide a list of constants to my front-end via GraphQL. I went down the route of using inspection, but it will only output the keys of the enum. Not the values. I learned that Graphene enums only contain name/description.

      __type(name: "FruitEnum") {
        enumValues {

this returns

  "data": {
    "__type": {
      "enumValues": (
          "name": "APPLE",
          "description": null
          "name": "BANANA",
          "description": null
          "name": "ORANGE",
          "description": null
  "errors": null

This is what the actual enum looks like

class FruitEnum(Enum):
    APPLE = "Apple -- but could also be other information for the front end"
    BANANA = "Banana"
    ORANGE = "Orange"

Is there a preferred way of exposing a list of constants like this through GraphQL? Can introspection be modified with a resolver to read the value? I am taking a regular Python enum and registering it with Graphene using the Enum.from_enum function.

gui design – What is the name of the user interface and font in this picture?

This simple, terminal-like user interface was once popular in operating system installers. I recall it being used in the Windows 9X and Windows XP installers, but I recently noticed that the Debian minimal installer also uses it, which seems to indicate that it’s not proprietary to Windows. It’s also used in many BIOS.

What is the name of this user interface (and the font)? This screenshot is from the Debian minimal installer.

User interface

website design – When reading a long passage, when do users tend to scroll the page?

I’m creating a web page with a lot of text, and elements that animate in once the user scrolls past a certain threshold. I need to determine exactly how far the user should scroll before triggering an animation, and I realized I don’t have a clear picture of how users scroll as they read.

When reading a long passage such as a lengthy blog post or news article, do users tend to:

  1. Read until they reach the button of their window, then scroll down a full viewport height and continue reading from the top of the window?

  2. Read until they reach the bottom of their window, then continue scrolling in small increments, such that they’re usually looking at the bottom of the window?

  3. Scroll continuously while reading, in small increments, so they’re usually looking at the center of their window?

  4. Something else, or a combination of the above?

As I thought about this, I realized I’m not even sure what I do, myself! I tend to follow behavior #1 when I’m thinking about it, but I’m pretty sure that’s not how I’d scroll under normal circumstances.

My own research on scroll behavior kept turning up articles on how far users scroll, rather than how they scroll. I know that a lot of people won’t read long passages to begin with, but I want to optimize for those users who do.

I’d ideally like to see some type of eye tracking study, and especially one which has data for different screen sizes and/or types of users. Lacking that, however, anecdotal experience would also be extremely welcome—even anecdotes about yourself, If you’re better at observing your natural behavior than I am.