Practical use of CSS Grid min-content


There are several use-cases for CSS Grid. In this example, it is used to solve the following requirements:

  • Create a table component with a fixed height
  • A header should always be at the top of the component
  • A footer should always be at the bottom of the component
  • The component should always have the same height, no matter how many rows are displayed
  • Overflow should be scollable

This can be accomplished with auto and min-content:

<div class="grid">
  <div class="header-filter">
  <div class="table">
  <div class="footer-pagination">
.grid {
  display: grid;
  grid-template-rows: min-content auto min-content;
  height: 250px;

.table {
  overflow: auto;

Check out this CodePen for a working example.

Disable preview mode in VS Code


Screenshot of file opened in normal and in preview-mode

What is the difference between the left and the right file? The right one is opened in preview mode.

Opening another file won't result in a new tab. Instead, the preview tab is changed to the new file - meaning the file currently previewed is closed.

The preview mode is used e.g. when you click on a file in the explorer or open a file through the Quick Open feature (Ctrl + p).

The following settings will disable the preview mode:

"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false

For more information on the preview mode, check out the official documentation.

Different color in Firefox and Chromium


Today I opened a website in Firefox and Chromium simultaneously. I noticed that the same color looks different in the two browsers.

I used the following inline website to check it out:

  body {
    margin: 0;
    padding: 0;

  div {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: blue;
    color: white;
    font-size: 20vw;

Difference between Firefox and Chromium color

Turns out that this is due to the color profile selected by the browser.

You can change the color profile of Chrome / Chromium at chrome://flags/#force-color-profile.

Force Color Profile option

Check here for more information.

PostgreSQL CSV Import: missing data for column "..."



The following .sql script will error out prematurely:

create table if not exists foo (
	bar text not null,
	baz text not null

copy foo (bar, baz) from stdin (format csv, delimiter ';', header true);

Here's the accompanying psql output:

psql:<stdin>:11: ERROR:  missing data for column "baz"
CONTEXT:  COPY foo, line 5: "\."


Adding a newline after the \. termination sequence fixes the error.

Collapsible Markdown


When presenting code or logs in Markdown, things tend to get out of hand quickly.
The <details> and <summary> HTML tags can be used to mitigate this, which hide certain parts of your document.
Be aware that Markdown specific syntax constructs within those HTML tags are only guaranteed to be rendered correctly by CommonMark and / or GFM compliant parsers (for example the GitHub Markdown parser).

	<summary>Click to expand this section!</summary>
	<h5>A nice Javascript pitfall!</h5>

	console.log(['1', '7', '11'].map(parseInt));

This Markdown snippet creates the following result:

Click to expand this section!
A nice Javascript pitfall!
console.log(['1', '7', '11'].map(parseInt));

Infinite rows with CSS Grid


CSS Grids can be used to layout your website in columns and rows. But did you know you don't have to specify the amount of rows?

You can define the height for each row with grid-auto-rows.

#grid {
  background-color: #1a2b3c;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 50px;

#item1 {
  background-color: #6699ff;
  grid-column: 1 / 4; /* width: 3fr */
  grid-row: 1 / 5; /* height: 200px */

#item2 {
  background-color: #66ffff;
  grid-column: 2 / 7; /* width: 5fr */
  grid-row: 2 / 11; /* height: 450px */

Check it out on codepen.

You can also use grid-auto-columns for infinite columns.

Set CSS Grid item width


In CSS Grid, you specify the size and position of elements with grid-column and grid-row. Normally you specify the position with {start-position} / {end-position}.

But you can also specify the width with span:

#item {
  /* 3 columns wide, 2 rows high */
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;

Check out this codepen example.

Using dynamic variables in psql


When developing in PostgreSQL, you may run into the fringe situation of being unable to use PL/pgSQL and instead having to fallback to plain psql (as was my case when writing tests with pgTap, since PL/pgSQL insists on using PERFORM over SELECT for void-returning functions).

Writing these tests in plain SQL quickly results in bloated code, since you have to reuse certain IDs over and over again, even when using CTEs.
While psql supports variables in the form of \set {name} {value}, these can not be dynamically set (i.e. using the result of a query).

However, it is possible to abuse runtime parameters (SET {name} TO {value}) for this purpose by making use of PL/pgSQLs EXECUTE, as shown in the following example:

DO $$
	EXECUTE format('SET %I TO %L', 'var.my_test_variable', (SELECT 1));
END $$;

Then, once you have returned to your plain SQL block, you may use SELECT current_setting('var.my_test_variable') to retrieve the value.

If used often, you could even move the EXECUTE block into its own function, receiving both name and value of the runtime parameter, and thus further removing unnecessary boilerplate code.