Practical use of CSS Grid min-content

2019-09-15

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>
  <div class="table">
    ...
  </div>
  <div class="footer-pagination">
    ...
  </div>
</div>
.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

2019-09-14

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

2019-09-13

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:

data:text/html,
<style>
  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;
  }
</style>
<body><div>0000ff</div></body>

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 "..."

2019-09-12

Problem

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);
bar;baz
Lorem;ipsum
dolor;sit
amet,;consectetur
\.

Here's the accompanying psql output:

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

Solution

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


Collapsible Markdown

2019-09-11

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).

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

	```javascript
	console.log(['1', '7', '11'].map(parseInt));
	```
</details>

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

2019-09-09

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

2019-09-06

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

2019-09-05

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 $$
BEGIN
	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.