Files
Blog/index.html
2024-11-25 16:43:17 +00:00

693 lines
18 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chris Kaczor</title>
<meta name="description" content="Code, Critters, and whatever I feel like writing about.">
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="Chris Kaczor">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png?v=2">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<meta name="generator" content="Eleventy v3.0.0">
<style>
.postlist { counter-reset: start-from 13 }
/* Defaults */
:root {
--font-family: Roboto, sans-serif;
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT,
Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
Courier, monospace;
}
/* Theme colors */
:root {
--color-gray-20: #e0e0e0;
--color-gray-50: #c0c0c0;
--color-gray-90: #333;
--background-color: #fff;
--text-color: var(--color-gray-90);
--text-color-link: #082840;
--text-color-link-active: #5f2b48;
--text-color-link-visited: #17050f;
--syntax-tab-size: 2;
}
@media (prefers-color-scheme: dark) {
:root {
--color-gray-20: #e0e0e0;
--color-gray-50: #c0c0c0;
--color-gray-90: #dad8d8;
/* --text-color is assigned to --color-gray-_ above */
--text-color-link: #1493fb;
--text-color-link-active: #6969f7;
--text-color-link-visited: #a6a6f8;
--background-color: #15202b;
}
}
/* Global stylesheet */
* {
box-sizing: border-box;
}
@view-transition {
navigation: auto;
}
html,
body {
padding: 0;
margin: 0 auto;
font-family: var(--font-family);
color: var(--text-color);
background-color: var(--background-color);
}
html {
overflow-y: scroll;
}
body {
max-width: 60em;
}
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
p:last-child {
margin-bottom: 0;
}
p {
line-height: 1.5;
}
li {
line-height: 1.5;
}
a[href] {
color: var(--text-color-link);
}
a[href]:visited {
color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
color: var(--text-color-link-active);
}
main {
padding: 1rem;
}
footer {
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 0.75rem;
}
main :first-child {
margin-top: 0;
}
header {
border-bottom: 1px dashed var(--color-gray-20);
}
header:after {
content: '';
display: table;
clear: both;
}
.links-nextprev {
display: flex;
justify-content: space-between;
gap: 0.5em 1em;
list-style: '';
border-top: 1px dashed var(--color-gray-20);
padding: 1em 0;
}
.links-nextprev > * {
flex-grow: 1;
}
.links-nextprev-next {
text-align: right;
}
table {
margin: 1em 0;
}
table td,
table th {
padding-right: 1em;
}
pre,
code {
font-family: var(--font-family-monospace);
}
pre:not([class*='language-']) {
margin: 0.5em 0;
line-height: 1.375; /* 22px /16 */
-moz-tab-size: var(--syntax-tab-size);
-o-tab-size: var(--syntax-tab-size);
tab-size: var(--syntax-tab-size);
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
overflow-x: auto;
}
code {
word-break: break-all;
}
/* Header */
header {
display: flex;
gap: 1em 0.5em;
flex-wrap: wrap;
align-items: center;
padding: 1em;
}
.home-link {
font-size: 1em; /* 16px /16 */
font-weight: 700;
margin-right: 2em;
}
.home-link:link:not(:hover) {
text-decoration: none;
}
/* Nav */
.nav {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 1em;
}
.nav-item a[href]:not(:hover) {
text-decoration: none;
}
.nav a[href][aria-current='page'] {
font-weight: bold;
}
/* Posts list */
.postlist {
list-style: none;
padding: 0;
}
.postlist-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin-bottom: 2em;
}
.postlist-item:last-child {
margin-bottom: 0em;
}
.postlist-item:before {
display: inline-block;
pointer-events: none;
line-height: 100%;
text-align: right;
}
.postlist-date,
.postlist-item:before {
font-size: 0.8125em; /* 13px /16 */
color: var(--color-gray-90);
}
.postlist-date {
word-spacing: -0.5px;
}
.postlist-link {
font-size: 1.1875em; /* 19px /16 */
font-weight: 700;
flex-basis: calc(100% - 1.5rem);
padding-right: 0.5em;
text-decoration: none;
}
.postlist-read-more {
text-decoration: none;
font-size: 0.8125em;
flex-basis: 100%;
}
.postlist-read-more:hover {
text-decoration: underline;
}
.postlist-link:hover {
text-decoration: underline;
text-underline-position: from-font;
text-underline-offset: 0;
text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
font-weight: bold;
}
.postlist-byline {
flex-basis: 100%;
}
.postlist-tags {
display: inline-flex;
align-items: center;
justify-content: center;
list-style-type: none;
gap: 0.5em;
font-size: 0.8125em;
padding-inline-start: 10px;
}
.postlist-tag {
text-decoration: none;
}
.postlist-tag:hover {
text-decoration: underline;
}
/* Tags */
.post-tag {
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: capitalize;
}
.postlist-item > .post-tag {
align-self: center;
}
/* Tags list */
.post-metadata {
display: inline-flex;
flex-wrap: wrap;
gap: 0.5em;
list-style: none;
padding: 0;
margin: 0;
}
.post-metadata time {
margin-right: 1em;
}
img {
max-width: 100%;
display: block;
margin: 0 auto;
}
img[height] {
height: auto;
}
img[width][height] {
height: auto;
}
.footer-links {
display: flex;
justify-content: center;
margin-top: 1rem;
height: 2rem;
column-gap: 1rem;
img {
height: 2rem;
}
}
</style>
</head>
<body>
<a href="#skip" class="visually-hidden">Skip to main content</a>
<header>
<a href="/" class="home-link">Chris Kaczor</a>
<nav>
<h2 class="visually-hidden" id="top-level-navigation-menu">Top level navigation menu</h2>
<ul class="nav">
<li class="nav-item">
<a href="/" aria-current="page">
Home
</a>
</li>
<li class="nav-item">
<a href="/tags/">
Tags
</a>
</li>
<li class="nav-item">
<a href="/about/">
About
</a>
</li>
</ul>
</nav>
</header>
<main id="skip">
<heading-anchors>
<ul reversed="" class="postlist">
<li class="postlist-item">
<a href="/blog/where-did-the-time-go/" class="postlist-link">
Where did the time go?
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2024-11-11">11 November 2024</time>
<ul class="postlist-tags">
<li>
<a href="/tags/excuses/" class="postlist-tag">Excuses</a>
</li>
</ul>
</span>
<p>Whoa - where the hell did all the time go?! I knew in the back of my mind that I was being a huge slacker by not updating in a while, but almost 5 years? That's crazy! My initial reaction was that the timestamp of my last post had gotten screwed up somehow, but the details of what I wrote proves that the time is right.</p>
<a href="/blog/where-did-the-time-go/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/back-again/" class="postlist-link">
Back Again
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2019-12-13">13 December 2019</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>,
</li>
<li>
<a href="/tags/excuses/" class="postlist-tag">Excuses</a>
</li>
</ul>
</span>
<p>When I started this blog I had recently been laid off and figured it was as good a time as any to give some visibility to the code I had been creating over the years rather than hoarding it like a jealous dragon. I intended to keep up with it but then I started a new job and the writing sort of fell by the wayside. I kept working on projects when I could but never really got the chance to write about them. I'm hoping to be a bit more consistent this time around but only time will tell.</p>
<a href="/blog/back-again/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/etsy-shop-widget/" class="postlist-link">
Etsy Shop Widget
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-04-20">20 April 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>
</li>
</ul>
</span>
<p>My wife and a friend run The Crafty Coop (edit: now closed) - an event planning business that also sells handmade party decorations/favors online and at craft shows. One of the ways I help out is as the designated &quot;IT guy&quot; by handling the web/email hosting and other technical stuff.</p>
<a href="/blog/etsy-shop-widget/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/feed-center/" class="postlist-link">
Feed Center
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-04-04">04 April 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>
</li>
</ul>
</span>
<p>One of my most complete projects is <a href="https://github.com/ckaczor/FeedCenter">Feed Center</a> - an RSS feed reader designed to blend in with the Windows desktop.</p>
<a href="/blog/feed-center/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/laundry-monitor-software/" class="postlist-link">
Laundry Monitor Software
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-04-02">02 April 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>,
</li>
<li>
<a href="/tags/floating-status-window/" class="postlist-tag">Floating Status Window</a>
</li>
</ul>
</span>
<p>The software side of <a href="https://github.com/ckaczor/LaundryMonitor">LaundryMonitor</a> is currently pretty straightforward. The <a href="https://getchip.com/pages/chip">C.H.I.P.</a> runs a Node.js application that keeps track of a GPIO pin for each current switch - when the switch is closed the appliance is on and when the switch is open the appliance is off. The application exposes a websocket that applications like <a href="https://github.com/ckaczor/HomeStatusWindow">HomeStatusWindow</a> can watch and messages are sent to a family Telegram channel.</p>
<a href="/blog/laundry-monitor-software/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/laundry-monitor-hardware/" class="postlist-link">
Laundry Monitor - Hardware
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-03-29">29 March 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>
</li>
</ul>
</span>
<p>The next project up is <a href="https://github.com/ckaczor/LaundryMonitor">LaundryMonitor</a> which uses the most hardware of anything I've done so far.</p>
<a href="/blog/laundry-monitor-hardware/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/work-indicator/" class="postlist-link">
Work Indicator
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-03-19">19 March 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>
</li>
</ul>
</span>
<p>I'm going to take a break from status windows for a little bit to cover my <a href="https://github.com/ckaczor/WorkIndicator">WorkIndicator</a> project.</p>
<a href="/blog/work-indicator/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/system-temperature-status-window/" class="postlist-link">
System Temperature Status Window
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-03-19">19 March 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>,
</li>
<li>
<a href="/tags/floating-status-window/" class="postlist-tag">Floating Status Window</a>
</li>
</ul>
</span>
<p>Next up in the &quot;floating status window&quot; category is <a href="https://github.com/ckaczor/SystemTemperatureStatusWindow">SystemTemperatureStatusWindow</a>. This one does exactly what it says on the tin - it shows various system temperature values.</p>
<a href="/blog/system-temperature-status-window/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/cpu-usage-status-window/" class="postlist-link">
CPU Usage Status Window
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-03-08">08 March 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>,
</li>
<li>
<a href="/tags/floating-status-window/" class="postlist-tag">Floating Status Window</a>
</li>
</ul>
</span>
<p>Now that I've written about my <a href="https://github.com/ckaczor/FloatingStatusWindow">FloatingStatusWindow</a> library I can start to talk about the projects that use it. First up is the <a href="https://github.com/ckaczor/ProcessCpuUsageStatusWindow">ProcessCpuUsageStatusWindow</a> project.</p>
<a href="/blog/cpu-usage-status-window/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/floating-status-window/" class="postlist-link">
Floating Status Window
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-02-21">21 February 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>,
</li>
<li>
<a href="/tags/floating-status-window/" class="postlist-tag">Floating Status Window</a>
</li>
</ul>
</span>
<p>Something that shows up in a lot of my projects is my <a href="https://github.com/ckaczor/FloatingStatusWindow">FloatingStatusWindow</a> library. It allows the creation of something akin to a desktop widget that displays simple text and blends in with the Windows desktop. This is what several of them look like in the corner of my secondary monitor:</p>
<a href="/blog/floating-status-window/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/weather-station/" class="postlist-link">
Weather Station
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-02-17">17 February 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>,
</li>
<li>
<a href="/tags/weather/" class="postlist-tag">Weather</a>
</li>
</ul>
</span>
<p>One of the oldest projects I'm still working on today is my weather station. I had always wanted a weather station but it seemed boring to just install something on the roof, stick an LCD display on the wall somewhere, and then forget about it - I wanted something I could build, expand on, and write my own software for.</p>
<a href="/blog/weather-station/" class="postlist-read-more">
Read more
</a>
</li>
<li class="postlist-item">
<a href="/blog/hello-world/" class="postlist-link">
Hello world!
</a>
<span class="postlist-byline">
<time class="postlist-date" datetime="2018-02-05">05 February 2018</time>
<ul class="postlist-tags">
<li>
<a href="/tags/code/" class="postlist-tag">Code</a>,
</li>
<li>
<a href="/tags/critters/" class="postlist-tag">Critters</a>
</li>
</ul>
</span>
<p>Being a programmer at heart it seems appropriate to stick with the classic &quot;hello world&quot; for starting off!</p>
<a href="/blog/hello-world/" class="postlist-read-more">
Read more
</a>
</li>
</ul>
</heading-anchors>
</main>
<footer>
<div class="footer-links">
<a href="https://github.com/ckaczor" title="GitHub">
<picture>
<source srcset="/img/github/github-mark.svg" media="(prefers-color-scheme: light)">
<source srcset="/img/github/github-mark-white.svg" media="(prefers-color-scheme: dark)">
<img src="/img/github/github-mark.svg" alt="GitHub Logo">
</picture>
</a>
<a href="/feed/feed.xml" type="application/atom+xml" title="Subscribe">
<picture>
<source srcset="/img/feed/rss.svg" media="(prefers-color-scheme: light)">
<source srcset="/img/feed/rss-white.svg" media="(prefers-color-scheme: dark)">
<img src="/img/feed/rss.svg" alt="RSS">
</picture>
</a>
<a href="https://www.linkedin.com/in/chris-kaczor/" title="LinkedIn">
<picture>
<source srcset="/img/linkedin/linkedin.svg" media="(prefers-color-scheme: light)">
<source srcset="/img/linkedin/linkedin-white.svg" media="(prefers-color-scheme: dark)">
<img src="/img/linkedin/linkedin.svg" alt="LinkedIn">
</picture>
</a>
</div>
</footer>
<!-- This page `/` was built on 2024-11-25T16:43:13.110Z -->
<!-- Built with Eleventy v3.0.0 -->
<script type="module" src="/dist/rJ3_G-2ArF.js"></script>
</body>
</html>