Jekyll2026-04-10T11:41:16+00:00https://bckrlab.org/feed.xmlblankBecker Lab a post with plotly.js2025-03-26T14:24:00+00:002025-03-26T14:24:00+00:00https://bckrlab.org/blog/2025/plotly%20(2)This is an example post with some plotly code.

```plotly
{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "type": "scatter"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [16, 5, 11, 9],
      "type": "scatter"
    }
  ]
}
```

Which generates:

{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "type": "scatter"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [16, 5, 11, 9],
      "type": "scatter"
    }
  ]
}

Also another example chart.

```plotly
{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "mode": "markers"
    },
    {
      "x": [2, 3, 4, 5],
      "y": [16, 5, 11, 9],
      "mode": "lines"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [12, 9, 15, 12],
      "mode": "lines+markers"
    }
  ],
  "layout": {
    "title": {
      "text": "Line and Scatter Plot"
    }
  }
}
```

This is how it looks like:

{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "mode": "markers"
    },
    {
      "x": [2, 3, 4, 5],
      "y": [16, 5, 11, 9],
      "mode": "lines"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [12, 9, 15, 12],
      "mode": "lines+markers"
    }
  ],
  "layout": {
    "title": {
      "text": "Line and Scatter Plot"
    }
  }
}
]]>a post with plotly.js2025-03-26T14:24:00+00:002025-03-26T14:24:00+00:00https://bckrlab.org/blog/2025/plotlyThis is an example post with some plotly code.

```plotly
{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "type": "scatter"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [16, 5, 11, 9],
      "type": "scatter"
    }
  ]
}
```

Which generates:

{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "type": "scatter"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [16, 5, 11, 9],
      "type": "scatter"
    }
  ]
}

Also another example chart.

```plotly
{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "mode": "markers"
    },
    {
      "x": [2, 3, 4, 5],
      "y": [16, 5, 11, 9],
      "mode": "lines"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [12, 9, 15, 12],
      "mode": "lines+markers"
    }
  ],
  "layout": {
    "title": {
      "text": "Line and Scatter Plot"
    }
  }
}
```

This is how it looks like:

{
  "data": [
    {
      "x": [1, 2, 3, 4],
      "y": [10, 15, 13, 17],
      "mode": "markers"
    },
    {
      "x": [2, 3, 4, 5],
      "y": [16, 5, 11, 9],
      "mode": "lines"
    },
    {
      "x": [1, 2, 3, 4],
      "y": [12, 9, 15, 12],
      "mode": "lines+markers"
    }
  ],
  "layout": {
    "title": {
      "text": "Line and Scatter Plot"
    }
  }
}
]]>a post with image galleries2024-12-04T01:59:00+00:002024-12-04T01:59:00+00:00https://bckrlab.org/blog/2024/photo-gallery%20(2)The images in this post are all zoomable, arranged into different mini-galleries using different libraries.

Lightbox2

PhotoSwipe

Spotlight JS

Venobox

]]>a post with image galleries2024-12-04T01:59:00+00:002024-12-04T01:59:00+00:00https://bckrlab.org/blog/2024/photo-galleryThe images in this post are all zoomable, arranged into different mini-galleries using different libraries.

Lightbox2

PhotoSwipe

Spotlight JS

Venobox

]]>a post with tabs2024-05-01T00:32:13+00:002024-05-01T00:32:13+00:00https://bckrlab.org/blog/2024/tabs%20(2)This is how a post with tabs looks like. Note that the tabs could be used for different purposes, not only for code.

First tabs

To add tabs, use the following syntax:

{% tabs group-name %}

{% tab group-name tab-name-1 %}

Content 1

{% endtab %}

{% tab group-name tab-name-2 %}

Content 2

{% endtab %}

{% endtabs %}

With this you can generate visualizations like:

  • var_dump('hello');

  • console.log("hello");

  • pputs 'hello'

Another example

  • hello:
  - "whatsup"
  - "hi"

  • {
  "hello": ["whatsup", "hi"]
}

Tabs for something else

  • Regular text

  • A quote

  • Hipster list

    • brunch
    • fixie
    • raybans
    • messenger bag
]]>a post with tabs2024-05-01T00:32:13+00:002024-05-01T00:32:13+00:00https://bckrlab.org/blog/2024/tabsThis is how a post with tabs looks like. Note that the tabs could be used for different purposes, not only for code.

First tabs

To add tabs, use the following syntax:

{% tabs group-name %}

{% tab group-name tab-name-1 %}

Content 1

{% endtab %}

{% tab group-name tab-name-2 %}

Content 2

{% endtab %}

{% endtabs %}

With this you can generate visualizations like:

  • var_dump('hello');

  • console.log("hello");

  • pputs 'hello'

Another example

  • hello:
  - "whatsup"
  - "hi"

  • {
  "hello": ["whatsup", "hi"]
}

Tabs for something else

  • Regular text

  • A quote

  • Hipster list

    • brunch
    • fixie
    • raybans
    • messenger bag
]]>a post with typograms2024-04-29T23:36:10+00:002024-04-29T23:36:10+00:00https://bckrlab.org/blog/2024/typograms%20(2)This is an example post with some typograms code.

```typograms
+----+
|    |---> My first diagram!
+----+
```

Which generates:

+----+
|    |---> My first diagram!
+----+

Another example:

```typograms
.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.
```

which generates:

.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.

For more examples, check out the typograms documentation.

]]>a post with typograms2024-04-29T23:36:10+00:002024-04-29T23:36:10+00:00https://bckrlab.org/blog/2024/typogramsThis is an example post with some typograms code.

```typograms
+----+
|    |---> My first diagram!
+----+
```

Which generates:

+----+
|    |---> My first diagram!
+----+

Another example:

```typograms
.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.
```

which generates:

.------------------------.
|.----------------------.|
||"https://example.com" ||
|'----------------------'|
| ______________________ |
||                      ||
||   Welcome!           ||
||                      ||
||                      ||
||  .----------------.  ||
||  | username       |  ||
||  '----------------'  ||
||  .----------------.  ||
||  |"*******"       |  ||
||  '----------------'  ||
||                      ||
||  .----------------.  ||
||  |   "Sign-up"    |  ||
||  '----------------'  ||
||                      ||
|+----------------------+|
.------------------------.

For more examples, check out the typograms documentation.

]]>a post that can be cited2024-04-28T15:06:00+00:002024-04-28T15:06:00+00:00https://bckrlab.org/blog/2024/post-citation%20(2)This is an example post that can be cited. The content of the post ends here, while the citation information is automatically provided below. The only thing needed is for you to set the citation key in the front matter to true.

]]>a post that can be cited2024-04-28T15:06:00+00:002024-04-28T15:06:00+00:00https://bckrlab.org/blog/2024/post-citationThis is an example post that can be cited. The content of the post ends here, while the citation information is automatically provided below. The only thing needed is for you to set the citation key in the front matter to true.

]]>