Create a new blog post

posted in productivity on 25 February 2019 • by Wouter Van Schandevijl

This is something for me (or anyone else really) because I keep forgetting all this stuff.

Use {: .hide-from-excerpt} to do just that.
img size must be 360x300. bigimg is 1400x262.
A —
Pragmatic Tips

New blog post

Create a new file in a folder in _posts:

_drafts: Not published.
productivity: Most things end up here apparently.
dotnet: Everything c#, .NET Core, Visual Studio, etc.
- nuget: .NET libraries and frameworks
javascript: Everything EcmaScript, TypeScript, Node, etc.
- npm: On specific npm packages
dev-setup: PowerShell, git, CLI, IDE, …
design: Software Design, Architecture. Currently no UI/UX Design.
trends: About itenium itself, IT Consultancy, Current Market Trends, …

Front Matter

Template

img size must be 360x300. bigimg is 1400x262.

---
layout: post
author: Wouter Van Schandevijl
title: ""
subTitle: ""
date: 2023-04-
desc: >
  
bigimg: 1400x262
  url: 
  desc: ""
  origin: 
img:
  url: 
  desc: ""
  origin: 
  title: ""
  linkUrl: 
categories: productivity | dotnet | javascript | dev-setup | design | trends | security
tags: [powershell,autohotkey,sql,angular,testing,excel,git,cheat-sheet,tutorial,windows,product,war-story,regex,debugging,meta,tech-talk,pragmatic-tips,fun,hacking,book-review]
series: series-unique-name
extras:
  - githubproject: https://github.com/itenium-be/
    githubtext: "Stuff that came into being during the making of this post"
  - url: 
    desc: ""
  - git: 
    desc: ""
interesting:
  - url: 
    desc: ""
toc:
  title: 
  icon: icon-javascript | dot-circle-o (net) | icon-shell (ps1) | eye-slash (c#) | icon-angular | windows | icon-git | car (ahk) | icon-mssql | file-excel-o | icon-mongodb
socials:
  youtube: ""
  linkedin: ""
  instagram: ""
  twitter: ""
  facebook: ""
---

{: .hide-from-excerpt}

<!--more-->

> "" — Koen Koenen

{: .notice--info}


{% include github-stars.html url="" desc="" %}
{% include kbd k="Control+O,Control+F" l="" %}
{% include post/image.html file="" alt="" title="" desc="" maxWidth="360px" %}
{% include post/youtube.html id="youtubeId" desc="" %}


![alt](/assets/blog-images/ "title"){: .img-responsive}

[description][ref]
[ref]: url

Some additional, optional front-matter:

---
last_modified_at: 2019-07-01
updates:
  - date: 2019-07-01
    desc: ""
todo:
  - reason: Followup|
    url: 
    desc: 
package-versions:
  - package: moment
    version: 5.2
redirect_from: /blog/
---

Add API links:  
[String.prototype.match](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match)
{: style="float: right"}
{: .title-url}

{{ '/assets/blog-assets/some-resource.html' | relative_url }}

Values

date: Make sure the filename and this date match.
desc: Multiline.
- Displayed on the main page and in the post details aside.
- In other places the excerpt is displayed. Which is everything before .
bigimg: 1400x262 pixels
- url: Located in /assets/blog-images/
- Optional desc and origin
img:
- url: 360x300 pixels
- Located in /assets/blog-images/
- Optional desc, title, origin and linkUrl
categories:
- Only three categories: productivity, dotnet and javascript.
- A new one might be for ex: ux, devops, architecture or agility.
- TypeScript or React could be tags but not a new category.
tags: A new tag may be more easily added.
- Configure icon for tags/categories in _date/blog.yml.
series: Unique name for the series
extras: Relevant created stuff
interesting: Stuff from elsewhere
toc.icon:
- Do not prefix with fa to use font-awewome
- Any from font-mfizz
- Site has also loaded a set from FlatIcon
updates: Add only substantial updates
- The last x updates will be displayed on the blog
- last_modified_at: Because Liquid
- Sort entries descending on date (latest update first)

Legacy

url-short: Retired.

Markdown

Can use Html and Liquid includes.

Add inline style with {: style="margin-left: 20px"}.

Liquid Includes

Show Shortcut:

Control + C , Control + V : Description

{% include kbd k="Control+C,Control+V" l="Description" %}
{% include kbd k="" l="" %}

Github Stars:

Laoujin/dotfiles : Windows dotfiles

{% include github-stars.html url="Laoujin/dotfiles" %}
{% include github-stars.html url="" desc="" %}

Youtube:

{% include post/youtube.html id="youtubeId" desc="text below clip" %}
{% include post/youtube.html id="" desc="" %}

Images:
TODO: Should probably make this clickable to open gallery and/or show full screen?

Will look for the file in /assets/blog-images/

{% include post/image.html file="" alt="" title="" desc="" maxWidth="360px" %}

Markdown

Create a <hr>:

* * *

Links:

<!-- Inline -->
[description](url)

<!-- Reference -->
[description][ref]
[ref]: url

<!-- Anchor -->
[create an anchor](#anchors-in-markdown)

Images:

Bootstrap 3: .img-responsive, .img-rounded, .img-thumbnail, .img-circle.

<!-- Inline -->
![alt text](/assets/blog-images/screenshot.jpg "Title Text"){: .img-responsive}
![](/assets/blog-images/ ""){: .img-responsive}

<!-- Reference -->
![alt text][ref]

[ref]: /assets/blog-images/ "Title Text"

Quote:

Start with a > for a quote.

> This is a quote

Emphasis:

italics bold ~~strikethrough~~

*italics*
**bold**
~~strikethrough~~

Tables

Can use emphasis and inline code blocks inside table cells.

table-code

| Header1    | Header2                                                 | Remarks |
|------------|---------------------------------------------------------|---------|
|            |
|            |
|            |
|            |
{: .table-code}

Header1	Header2	Remarks
Left	Center	Right

table-excel

|   | A       | B        | C      | D          | E        | F         | G         | H       |
|---|---------|----------|--------|------------|----------|-----------|-----------|---------|
| 1 | Header  |          |        |            |          |           |           |         |
| 2 |         |          |        |            |          |           |           |         |
| 3 |         |          |        |            |          |           |           |         |
| 4 |         |          |        |            |          |           |           |         |
| 5 |         |          |        |            |          |           |           |         |
{: .table-excel}

	A	B	C	D	E	F	G	H
1	Header
2
3
4
5

Notices

This is a {: .notice}. Use ** for titles.

This is a {: .notice--info}

This is a {: .notice--danger}

Escaping

Especially fun when blogging for example about Jekyll itself.

raw / endraw:

{% raw %}
no escaping needed
not even }} {{ or %} {%
{% endraw %}

More escaping:

\| for not starting a new column in a table
\* for not starting bold
``$` ``: Use double (or triple, …) ` when displaying ` inside an inline code block. May not start/end with such backtick.
{ doesn’t have to be escaped
{{ '{{' }} for displaying a literal {{ (or { when not in a code block)
{{ '' }}}} for displaying a literal }} (or } when not in a code block))
And combined: {{ '{{ var ' }}}} for {{ var }}
{{ '{%' }} for displaying a literal {%
{{ '{% var ' }}%} for displaying a literal {% var %}
Assign {% assign var = '{{ sth }}' %} and display {{ var }} => {{ sth }}

Plugins

Github pages supported plugins

Some new shiny things to try out in future blog posts:

jemoji

jekyll/jemoji : I give this plugin two !

Copy ✂️ Paste 📋

╯‵Д′)╯彡┻━┻ angry guy flipping a table

Find on CLI with

sindresorhus/emoj : Doesn’t work on Windows though

npm install --global emoj
emoj [text]

jekyll-gist

jekyll/jekyll-gist

{% gist 9b0b360b0c0cb39143990e92fa3adcef %}

jekyll-avatar

benbalter/jekyll-avatar :

{% avatar fabpot %}