Create a new blog post

Create a new blog post

posted in productivity on  • 

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 <!--more-->.
  • 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:
  • 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 &#123; when not in a code block)
  • {{ '' }}}} for displaying a literal }} (or &#125; 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 :+1:!

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 :

fabpot

{% avatar fabpot %}

Other interesting reads
Tags: meta