Today I Learned

Manipulace se soubory v bashi

Pro zautomatizování článků s knihami jsem si vytvořil akci, které se dá seznam obrázků, na základě kterých vygeneruje adresářovou strukturu. 1. vytvoř seznam souborů 1. vytvoř output složku, pokud není 1. procházej polem v seznamu a u každé položky: 1. rozděl název na jméno a příponu 1. vygeneruj řetězec, jež bude obsah souboru 1. vytvoř složky pro danou knihu 1. nakopíruj obrázek 1. vygeneruj mdx souboru s přednastavenými daty 1. profit :)

ls ./pics/print-books > ./print-books.txt

mkdir "../drafts/generated-books/"

while read -r filename; do                       # loop through input file content
  [[ $filename ]] || continue                    # skip empty lines
  extension="${filename##*.}"
  filename="${filename%.*}"
  output=(
"---
title:  Sample title")
output+=("slug: $filename")
output+=("thumbnail: ./img/$filename.$extension")       # name doesn't have a space 
output+=("
status:
- nepřečteno
---")
  mkdir "../drafts/generated-books/$filename"
  mkdir "../drafts/generated-books/$filename/img/"
  cp "./pics/print-books/$filename.$extension" "../drafts/generated-books/$filename/img/$filename.$extension"
  printf '%s\n' "${output[@]}" > "../drafts/generated-books/$filename/$filename.mdx" # write array content to the output file
done < print-books.txt
Stack overflow.
  • shell
  • automatization

Změna git konfiguráku podle složky

Pomocí includeIf lze načíst git config podle cesty. Tak můžu vše pracovní commitovat pod pracovním účtem a osobní nebo open source kód pod soukromým. Oficiální dokumentace.

Ukázka

[includeIf "gitdir:~/work/klient/"]
    path = .gitconfig-work
[includeIf "gitdir:~/work/personal/"]
    path = .gitconfig-personal

.gitconfig-work, resp. .gitconfig-personal pak vypadají jako normální konfigurace.

  • git
  • configuration

Custom post types v Gatsbym pomocí regexu v query

  • Regex: StackOverflow
  • onCreateNode: GitHub Nebo jde přidat klíč do každého příspěvku ve frontmatter a pak filtrovat. To je neefektivní jak při psaní, tak při generování.
  • gatsby
  • graphql

Formátování času a dat pomocí date-fns

Tohle formátování jsem začal používat právě pro tuto sekci, abych mohl mít datum naformátovaný různě.

  • date-fns
  • js

Klávesové zkratky v repozitářích

Práce na GitHubu, GitLabu i Bitbucketu (ale tam bohužel minimálně) jde zeefektivnit klávesovými zkratkami. Jejich seznam jde vyvolat stistknutím ?.

  • gitlab
  • github
  • bitbucket
  • productivity

Responzivní fluidní typografie

Z článku Precise control over responsive typography jsem odzkoušel fluidní šklálování typografie. Nakonec jsem ho zavrhl, protože kód byl dost nabobtnalý, nepřehledný a prohlížeč dostával kouř, aby to vše přepočítal. A přínosy nebyly tak hodnotné. Ale je dobré o téhle technice vědět.

  • css
  • typografie

Batch create folders

cat dirlist.txt | xargs mkdir
Další zdroje:
  • shell
  • automatization

TIL

  • rozjel jsem základ blogu na Gatsbym
  • upravil jsem buildění stylů na globální styl
  • nastavil jsem lintery
  • nasadil jsem to na Netlify a přesměroval doménu, kterou jsem používal na GitHub Pages
  • gatsby

TIL

Kolem vánoc jsem studoval Frontned Masters kurzy

Introduction to Gatsby

Začal jsem Gatsbym, protože spojuje věci, co mám rád nebo co mě lákají - JAM stact, statické generátory, React. A byl jsem z toho kurzu nadšený. Zkouknul jsem ho skoro naráz, při první příležitosti jsem se pak pustil do kódování a výsledek je tento web. :)

Responsive Web Typography

Vynikající kurz, kde jsem se dozvědel o variabilních fontech, lepšímu nastavení typografické škály a pokročilých technikách, jak kontrolovat velikosti fluidně. Dost z technik jsem rovnou vyuřil tady na blogu, napíšu o tom i článek.

CSS Grids and Flexbox for Responsive Web Design

Tento kurz byl nuda. Bylo to takové předčítání specifikace pro retardy. Jen je na mě taková moc americky teatrální a úplně jednoduché koncepty tam opakuje 5x. Vleče se to a žádných praktických ukázek a řešení skutečných problému se nedočkáme. Základy se dají naučit daleko lépe hraním si + koukáním do specifikace a dokumentace. Tenhle kurz byl k ničemu.

Advanced CSS Layouts

Tenhle byl ještě horší, než ten předchozí. Bude to znít povrchně, ale Jen tady má nový účes, který mě iritoval celých těch několik hodin, co jsem se vydržel koukat. A probírá tam zbytečné a zastaralé věci. Takže zase kurz, který je lepší přeskočit.

  • gatsby
  • typography
  • css grid
  • Frontend Masters
  • courses