Search

Reinhart Previano K.

Do you love to Ctrl-K, Ctrl-/, or / ? Now you can do three of them (>_ )!

No results so far...

Contact Information

• (Updated )

Site Update: More glass-cards!

Reinhart Previano Koentjoro's profile picture

Reinhart Previano Koentjoro (@reinhart)

Published on Logs of the SYSTEM

Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Bluesky Share to Bluesky Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Share via MastodonShare Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2024/05/04/site-update-more-glass-cards?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2024/05/04/site-update-more-glass-cards</a></iframe>
Preview
Cover image for Site Update: More glass-cards!

It has been a long time when we reintroduced glass-cards on our website. They are timeless, representing these four different eras of user interface design:

  • Modern version of the Flat Design, full with cards and rounded corners,
  • Windows 95-era aesthetics,
  • Fictional-yet-futuristic UIs, like Augmented UI,
  • and glassmorphism. We started on experimenting these cards before glassmorphism was even a trend.

We are first proud to introduce this as far as in 2019, before 2021, and late 2023, where we made it the foundation of our design system.

A preview of the original implementation of the glass-card effect circa 2019, originally published on CodePen.

And now, there’s a new kind of glass-cards available on our website: tables! Before, we do not have proper styling, so tables on our website didn’t have borders at all. But now we have, and with a special highlight effect on it.

A screenshot of a blog posts on reinhart1010.id in light mode, featuring colored bold texts, links, and inline code. These texts are accompanied with a table, which is now styled primarily in magenta color, based on the renowned glass-card effect primarily featured on reinhart1010.id.

The blog content is originally available on https://reinhart1010.id/blog/2024/05/01/our-unwritten-rest-api-conventions .

There are not much other news to share, but we really wanted to bring back this old effect to our new website. Both sites are also powered by Highlight.js, making it technically possible for us to reimplement this cool effect:

A screenshot of the reinhart1010.id website in 2021, featuring the glass-card effect on code blocks.

And lastly, you can see that our blog posts become more colorful, as monospaced text (and commonly used for inline code snippets) are now highlighted "blue", alongside violet for links and magenta for bold. We have also optimized the contrast of these colors in the dark mode, making blog posts as attractive on dark mode as in light.

A screenshot of a blog posts on reinhart1010.id in dark mode, featuring colored bold texts, links, and inline code. These texts are accompanied with a table, which is now styled primarily in magenta color, based on the renowned glass-card effect primarily featured on reinhart1010.id.

The blog content is originally available on https://reinhart1010.id/blog/2024/05/01/our-unwritten-rest-api-conventions .

So, what’s next? We’ve silently teasing a new logo for Shift and Shiftine based on a new character system that’s modular, allowing anyone to remix the assets, and we can’t wait to have these new ones on our websites.

A

And lastly, we are currently in progress for tagging accessibility-friendly articles, which contains the necessary alternative text for images (including this post). We are planning to show such labels on our site to encourage ourselves to improve such accessibility!

Share Copy Link Print PDF Embed Share to Email Share to SMS Yahoo! Share to Yahoo! Mail Mastodon Share to Mastodon Share to KakaoStory Messenger Share to Messenger Pocket Share to Pocket Flipboard Share to Flipboard Pinterest Share to Pinterest Reddit Share to Reddit Y Combinator Share to Hacker News Odnoklassniki Share to Odnoklassniki Blogger Share to Blogger Pleroma Share to Pleroma Share to Friendica Share to KakaoTalk 1Artboard 1 copy 2 Share to Snapchat Xing Share to Xing Share to Misskey LINE Share to LINE Evernote Share to Evernote WhatsApp Share to WhatsApp LiveJournal Share to Livejournal Diaspora Share to Diaspora Share to Gmail Threads Share to Threads Threema Share to Threema Share to X Tumblr Share to Tumblr Buffer Share to Buffer LinkedIn Share to LinkedIn Mail.Ru Share to mail.ru VK Share to VKontakte Trello Share to Trello Facebook Share to Facebook Bluesky Share to Bluesky Skype Share to Skype Hatena Bookmark Share to Hatena Bookmark! Share via MastodonShare Telegram Share to Telegram WordPress Share to WordPress.com

Embed

This website supports oEmbed. To quickly use oEmbed, just copy this site's link to your oEmbed-supported apps and websites like WordPress.

Alternatively, copy and paste the HTML code below to embed this post in your website.

($_ )! We have made this thing responsive, but recommend at least 512x512 pixels for best results.
<iframe src="https://reinhart1010.id/blog/2024/05/04/site-update-more-glass-cards?embed" height="512" width="512" style="border:none;"><a href="{{ $canonical }}">https://reinhart1010.id/blog/2024/05/04/site-update-more-glass-cards</a></iframe>
Preview

Reinhart Previano Koentjoro
Reinhart Previano Koentjoro
Citra Manggala Dirgantara
Citra Manggala Dirgantara

A Reinhart company

Products

Company