- Web Developer
- Posts
- KeyEcho Release π, 10 Tips for CSS Animations π¨, DevTools Tips π οΈ
KeyEcho Release π, 10 Tips for CSS Animations π¨, DevTools Tips π οΈ
2024-06-05
This week's issue of our newsletter is delayed because I've been busy with my weekend project - KeyEcho. I'm excited to share more about it here.
Articles
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/76149174-c55d-44f2-9d71-803d377aae6d/image.png?t=1717505226)
I love the sound of mechanical keyboard keys and have tried many keyboards. Currently, I am using a capacitive keyboard, but it lacks a lot of the fun.
Recently, I discovered Mechvibes and Klack. Both can produce mechanical keyboard sounds when typing. However, both have some shortcomings:
Mechvibes is an open-source, cross-platform application built with Electron. This makes it large in memory and disk usage, and it occasionally lags.
Klack is a paid, closed-source project limited to macOS. It is built natively with Swift, and it runs smoothly on macOS. However, I have multiple devices and want to use it on other platforms as well. Additionally, its sound packs are not as varied or customizable as those in Mechvibes.
So, over the weekend, I decided to create my ideal application, KeyEcho. It uses Tauri and benefits from Rust, resulting in minimal memory and CPU usage and extremely fast performance.
Currently, it is in the MVP version. If you're interested, you can download it here.
KeyEcho is open-source and free, and I would greatly appreciate your use and contributions. I'm continuing to develop it and will write more about it later this week.
CSS Anchor positioning is available from Chrome 125. It allows you to position elements relative to other elements (called anchors) within the same document. This can simplify many complex layout needs.
This article covers some simple rules of web design that can be quickly mastered and applied to daily work.
An overview of advanced CSS usage. It provides practical advice to make your animations look better.
Tools
![](https://private-user-images.githubusercontent.com/72293912/287742784-197da43e-02f4-4895-8d3e-b7a42a591c26.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc1NzY0MDgsIm5iZiI6MTcxNzU3NjEwOCwicGF0aCI6Ii83MjI5MzkxMi8yODc3NDI3ODQtMTk3ZGE0M2UtMDJmNC00ODk1LThkM2UtYjdhNDJhNTkxYzI2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjA1VDA4MjgyOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU3ZmJjOTJiMjkzZWY4ZmE1OGRmMDY4M2Y4NzEwNDI0NjQxZTFiZTIwNGVkYTUzMGUyNTNjMmQ3OTc3NTJmYWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.7U7PrCEGUbGgBCBTXowWuTig0cFCOzo-T9vGqd4vsGM)
Reply