hTWOo v0.4.0 got released – more Teams and improvements
Version 0.4.0 got finally released, and first of all, I have to thank three people who helped me make this version possible.
Waldek Mastykarz @waldekm, who recently implemented an hTWOo showcase using Microsoft Graph Toolkit.
Derek Cash-Peterson did a great job helping me test various beta versions. Under the hood, there was some restructuring going on. It doesn’t mean that anything changed in your developer experience.
Julie Turner also provided great feedback and test run hTWOo HTML/CSS components in a ReactJS environment.
So what is in this release now?
Card Grid Supports
To make it easier for the developer, I created a base implementation of a card grid. Similar to what Waldek described in his blog post. It uses the CSS grid layout, which makes such a grid system easy to implement.
The following pictures show how the grid behaves on different screen sizes.
Care layout title eclipses
Long title in the card layout will now have a maximum height of two lines and then automatically add eclipses at the end ‘…’.
These ellipses are just a small but important improvement when the text does not fit on the card. This implementation is all based on CSS and does not require any JavaScript.
Image Shimmer
Image shimmer should improve the loading performance for images. The idea here is that the image has a background shimmer effect and a blank transparent image on the image source. Those are also called “replaced elements” in CSS.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" class="hoo-ph-img16x9" width="320px" height="180px">
So on after replacing the src attribute with the real image URL, it overlays the shimmering background.
This effect is currently available for the following aspect ratios:
CDN Support
If you like to use hTWOo from a CDN, you can use it now via unpkg.
The dist-folder contains a precompiled version of the CSS and the JavaScripts in UMD, AMD, and CommonJS.
Microsoft Teams Toolbar and Dashboard – First Draft
This release also extends the support for Microsoft Teams applications. So there is now the Teams Toolbar as well as the Dashboard component included.
In future, the Microsoft Teams support also gets extended features.
In case you wonder why doesn’t it have the colour like in Microsoft Teams. In Teams, the experience looks like this. We will get there.
I am working on a Theme Switcher add-on for the style guide, but now I can only trigger it during development or in a SharePoint Framework Solution embedded in Microsoft Teams.
More to come soon.
and finally YOU
To get started with hTWOo on your next project, please check the tutorials in the documentation.
If you have features missing, let us know in the discussion forum or case of emergency, you can always drop an issue or leave a star on the Github Repo to show your support.