We have a title for our newsletter since this week; The Health & IT Insider
The branding is a reflection of the community I want to create. It’s also where I can provide the most value to you with my 20+ years of IT experience, and my passion for learning about Health.
The science part that used to be in the branding is still relevant. Applying the scientific principles through research, being curious, and questioning what we know. That is how we can uncover what is true, and what is not true.
I’d like to thank, and appreciate everyone that has subscribed this early into my journey!
If you could do me a favor.
Reply to this email with your story. Who you are and why you subscribed.
This is in the end, about having conversations and learning together. Additionally I hope to provide better value when I know who is reading, thanks again!
What I'm covering in this issue:
From No Social to Content Creator
A quick bit of history why I started writing and putting myself out there as a content creator.
I’ve always ignored Social media for a large part of my life. Probably because I’m (almost) 42 and raised in the era of the early internet without social media.
Social gatherings happened solely in or outside the house, not on the internet with the exception of messaging apps like ICQ and IRC.
Skipping to earlier this year when our other product, eezze.io, launched for Angel investment. I found that marketing and business development was exceedingly difficult without an online audience.
Eezze,io was of course not the first time we made a software product. In prior iterations we had a clear idea about our customers, or we had partners that could help us here.
In order to market and get attention to demonstrate the value that you can bring to people and the marketplace. Those people must know about you first. One of the obvious ways to get an audience is social media. My personal brand journey started when that, perhaps obvious, realization hit.
I must be online to expand my reach and to market what I can offer more effectively. The other fact in business is; people buy from other people.
I’ve put two and two together, and started 4 weeks ago sharing my knowledge and building this community of health-oriented IT professionals and interested people.
Why Knowledge sharing?
Knowledge sharing is how I can provide value to this community and beyond.
- It's what I did during my consulting years.
- It's what I did sharing my experience with my co-founder, and building 4 software products.
- It's what I did 4 years ago when I started blogging on dev.to.
- It's what I started 4 weeks ago with the launch of my personal brand, rolfstreefkerk.com
This website is under continuous development as the community evolves. The latest iteration of that development released yesterday.
The new major change is the Topics concept as the central navigation point. Each topic page binds all the related articles together, and uses sub-topics to deep-dive into more specific area's.
The whole is more than the sum of its parts.
This change hopefully makes finding related information a lot easier to do.
My intention for the long term is to expand our knowledge sharing "hub". into a giant learning resource.
Actionable insights
A few actionable insights I’d like to close this Newsletter with regarding technical learnings;
- Tailwind for CSS,
- Astro for static site website building.
While re-building rolfstreefkerk.com I had to learn a few things again, going back 15+ years when I was still doing a lot of website building with CSS for businesses.
Things have changed rather dramatically, now that you can use Tailwind to simplify CSS writing considerably and Astro to take care of a lot of the heavy lifting of building a site.
1. Tailwind
Design your CSS from the mobile perspective first, then move up in screen sizes are you go;
e.g. md:, lg: for medium and larger screens respectively. These prefixes instruct the browser window to use the style for the minimum width screen size indicated.
With that you can instruct your styling to go from 1 column grid for mobile, to multiple columns in that same grid design.
Use the order-1 directive to order the div parts of your grid structure such that they are rendered in the correct ordering side by side and below one another.
Within the grid system, you can have div with flex structure for instance to order your social media links:
An example of my footer that demonstrates all of these concepts in one code block:
<footer class="grid lg:grid-cols-3 grid-cols-1">
<div class="grid lg:grid-cols-[1fr] order-3 lg:order-1">
</div>
<div class="grid lg:grid-cols-[1fr] order-1 lg:order-3">
<div class="flex flex-wrap items-center justify-center lg:justify-end">
<div>
<Link href="https://linkedin.com/in/rolfstreefkerk">
<Icon name="mdi:linkedin" size={20} />
</Link>
</div>
<div>
<Link href="https://github.com/rpstreef">
<Icon name="mdi:github" size={20} />
</Link>
</div>
<div>
<Link href="https://x.com/rolfstreefkerk">
<Icon name="mdi:twitter" size={20} />
</Link>
</div>
</div>
</div>
<div class="grid order-2">
<ThemeSwitch client:only="react" />
</div>
</footer>
Also note that I use the mobile first design process to create a single column design first grid-cols-1, then using lg: i change the grid to 3 columns: lg:grid-cols-3 for larger screens.
I apply the order-1 order-2 order-3 to re-arrange the ordering depending on 1 column or the 3 column view for larger screens.
The flex part centers and aligns all the icons next to each other, or on a larger screen aligns the icons towards the right side of the screen.
Another tid bit that helped me getting better text spacing and readability for larger text blocks;
- Better text readability:
max-w-prose
- Increase text spacing for headers:
tracking-wide
2. Astro
Astro.build is a great framework to piece together a website using other web standard frameworks such as React in this case.
The take aways here are:
Easy redirects with configuration
Create redirects in the astro.config.js file when you change the navigation structure. E.g.:
This will redirect all the posts to articles navigation.
export default defineConfig({
site: site.url,
redirects: {
'/posts/[...slug]': '/article/[...slug]',
},
})
ConvertKit form integration
Possibly the most annoying thing I had to deal with this week is the ConvertKit form integration.
I’m still not entirely satisfied with how it looks, but the integration is a bit hacky in my point of view.
I managed to do it like this.
Essentially you create the ConvertKit form on their website and roughly design it, then to make it fit for your use case and placement needs.
You can then add CSS in the following manner, and embed the ConvertKit form HTML export as a JavaScript constant inside the div “setter” with dangerouslySetInnerHTML:
import { CONVERTKIT_HTML } from './ConvertKitFormJs'
const formKitCss = `
.formkit-field {
margin: 0 5px 15px 0 !important;
flex: 1 0 120px !important;
}
.formkit-submit {
flex: 1 0 95px !important;
}
`
export function NewsletterForm() {
return (
<div className='mx-auto flex justify-center md:justify-normal'>
{/* Import the HTML file */}
<div dangerouslySetInnerHTML={{ __html: CONVERTKIT_HTML }} />
<style dangerouslySetInnerHTML={{ __html: formKitCss }} />
</div>
)
}
export default NewsletterForm
I appreciate your time, for any content suggestions or corrections on what I’ve provided. I’m always open to talk and learn.
Let’s continue the discussion on Twitter and have a great day ahead!
