Hi everyone, recently I used codex and GPT-5.2 to build a simple SSL certificate monitoring website, and I'd like to share some of my development experiences. The project link is at the end, but first, let's talk about the technical implementation.
The Motivation
I've encountered several service outages caused by expired SSL certificates in the past. Each time, I had to react after users reported the issue, which was very passive. While there are some monitoring tools on the market, they are either too heavy or lack the necessary features, so I decided to build my own.
Technology Stack
Next.js 16 + shadcn/ui + TypeScript
I chose Next.js because:
The development experience with App Router is excellent, with a clear mapping between routes and file structure.
Server Components reduce the need for client-side JavaScript.
Built-in features like image optimization and font loading are ready to use out of the box.
shadcn/ui is a component library based on Radix UI, and its advantages are:
Components are copied directly into your project, giving you full control.
It uses Tailwind CSS, making style customization easy.
It has excellent accessibility features.
Drizzle ORM + PostgreSQL
I've used Prisma before, but I tried Drizzle this time and found it to be more lightweight:
Faster type generation.
More intuitive SQL operations.
Better query performance.
better-auth Authentication System
This is a recent discovery I made, and it's more modern than NextAuth:
Better TypeScript support.
A cleaner API design.
Supports email/password and multiple OAuth providers (GitHub, Google).
Some Challenges I Faced
1. The Complexity of Certificate Chain Validation
At first, I thought checking an SSL certificate was simple—just get the certificate information. I later discovered that certificate chain validation is quite complex:
You need to verify the signature of each certificate in the chain.
You must check the integrity of the entire certificate chain.
You have to determine if the root certificate is trusted (which browsers have built-in lists for).
You need to handle cases where intermediate certificates are missing.
The solution was to create a complete certificate chain extraction and validation module that includes:
Extracting the full certificate chain from a TLS connection.
Verifying the signature and validity period of each certificate.
Detecting broken or incomplete chains.
Visualizing the chain structure in a tree format.
2. Designing the Security Scoring System
To help users quickly understand the security status of their certificates, I created a scoring system from A+ to F. The core logic is:
Weighted score across four dimensions
- Certificate Validity: 30%
- Chain Integrity: 25%
- Cryptographic Strength: 25%
- Protocol Version: 20%
If there are critical issues (e.g., expired certificate), the maximum grade is C
The challenges were:
How to allocate weights reasonably.
How to design the penalty rules.
How to provide valuable improvement suggestions.
Ultimately, I adopted a layered scoring approach where each dimension is calculated independently and then combined with weights.
3. Hydration Issues with Multi-language Routing
When supporting 6 languages, I encountered React Hydration errors:
// ❌ Incorrect approach
// app/[locale]/layout.tsx contained the <html> tag
// This conflicted with the root layout
// ✅ Correct approach
// The root layout has only one <html> tag
// Use a client component to dynamically update the lang attribute
4. Graceful Degradation for Redis Caching
To improve authentication performance, I added Redis caching. But I had to consider:
What happens when Redis is unavailable?
How do you handle cache and database data inconsistency?
The solution was:
Automatically fall back to the database if the Redis connection fails.
Actively invalidate the cache when the database is updated.
Provide cache statistics API to monitor the hit rate.
5. PageSpeed Optimization
Initially, the Lighthouse score was only in the 60s. The main problems were:
Large JavaScript Bundle
Used Next.js's dynamic imports to load components on demand.
Removed unused dependencies.
Enabled Tree Shaking.
Image Optimization
Used the Next.js Image component for automatic optimization.
Added appropriate placeholders.
Enabled lazy loading for images.
Font Loading
Used next/font for automatic font optimization.
Reduced the number of font variants.
Used font-display: swap to avoid layout shifts.
Critical Rendering Path
Identified critical CSS and inlined it into the HTML.
Deferred loading of non-critical JavaScript.
Optimized the loading order of third-party scripts.
Third-party Script Optimization
Deferred loading for Google Analytics, Crisp Chat, etc.
Used the defer/async attributes.
Considered using Web Workers for time-consuming tasks.
After optimization:
Performance: 60 → 95
Accessibility: 85 → 98
Best Practices: 90 → 100
SEO: 100
Some Technical Highlights
Certificate Chain Visualization
A tree structure is used to display the certificate chain, with expand/collapse functionality and color-coding for different statuses:
Green: Valid
Yellow: Expiring soon
Red: Expired
Security Issue Detection
Automatically detects insecure cryptographic algorithms:
MD5, SHA-1 signature algorithms.
Weak ciphers like RC4, DES.
Old protocols like TLS 1.0/1.1.
Multi-channel Notifications
Currently supports five notification channels: Email, Slack, Discord, Telegram, and Feishu. Users can freely combine them.
Project Link
https://guardssl.info
Features:
Free SSL certificate checking.
Domain monitoring and expiration reminders.
Security scoring and improvement suggestions.
Multi-language support (Chinese, English, Japanese, French, Spanish).
Feel free to try it out and provide feedback. We can discuss any questions you might have.
Quick Note
RSS for tagIntegrate the Notes app with your app and web content.
Posts under Quick Note tag
2 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
Hello,
Relatively new to AppleScripts in current gen (I've used it back in 2010s) and would like some help if someone can point me in the right direction.
Is AppleScript the best/only way to interact with Notes application? (I'm on Sequioa)
1.1 I've tried to use LLM to generate a Swift app, but it still calls out to AppleScripts, so I'm wondering if I'm missing something.
1.2 If I'm going down a rabbit hole, I'd like to stop since I want to finish this quick task and move on and or fall deeply in love with AppleScripts... whichever comes first.
Is There a better way to write notes? Script Editor is still a minimal IDE, I'd love to find something that will do some auto completion/suggestions because the documentation in the Script Editor is still a tad weak. (I'm used to interpreted languages like bash, ruby, etc...) where if I don't understand something I just dig into the code instead of turse documentation that just exposes public end points and does not tell you much more :(
My problem: I'd like to set up a cron that periodically checks my notes, and cleans up the shared notes. Basically it's a shared set of notes that have checklist on it and cleans up. (weekly chores etc...) I want to read the notes, find out which ones have been marked checked. Reset the ones that are done, leave unfinished ones alone and reset the old ones.
This is how far I've gotten:
let appleScript = """```
tell application "Notes"
set targetNote to note "\Test" of default account
return body of targetNote
end tell
That works like a charm, Kind of dumb because I rather use and ID of the note not the name :(
It returns the following
<div><b><span style=\\"font-size: 24px\\">Test</span></b></div>
<div><br></div>
<ul>
<li> Not Done</li>
<li>Done</li>
<li>Not Done yet</li>
</ul>
<div><br></div>
<div>Single line</div>
Which is a good start!
Issues:
There is no way to tell which Item is marked "Checked" and which one is not :(
Any helps is greatly appreciated!