While most people associate lossy compression with media assets like images, it can actually be beneficial in other areas as well. Take for example CSS files – compressing them can help improve performance and reduce load times. However, using lossy compression on CSS files can break syntax and cause errors, so it’s not always recommended.
One fun experiment with lossy compression on CSS files was carried out by Daniel Janus. By progressively increasing the level of compression on CSS files with different amounts of style rules, he showcased the varying levels of information loss and the impact it had on the appearance of the page.
When it comes to syntax highlighting in JavaScript, Prism.js is a popular choice. However, an alternative tool called Shiki caught my attention with its visually appealing results based on TextMate grammars, similar to VS Code. Running in any JS runtime, Shiki offers a compelling option for developers looking to enhance code readability.
Another interesting UI/UX interaction is the “Pull to refresh” feature, made popular by Tweetie. Adam Argyle has devised a clever solution to implement this interaction on the web using scroll snap points and Scroll-Driven Animations. The result is a seamless and engaging user experience that mimics native app interactions.
For those in need of color inspiration, Dieter Rams designs provide a timeless palette that can elevate any project. Similarly, Framer components offer elegantly designed buttons and controls that exude a tactile quality, inviting users to engage with them.
Exploring the concept of “Local First Web Development” introduces a new perspective on data storage and synchronization. By enabling apps to store data locally and sync it later, developers can enhance offline functionality and reduce loading times. This approach, championed by major apps like Figma, aligns with the principles of PWAs and introduces new technologies like CRDTs to revolutionize data syncing processes.