Recently, I started a newsletter. During the planning phase, I thought about content for my humbled subscribers. I watched a couple of development sessions while attending the Microsoft 365 Community Day. While great developers delivered those sessions, I recognised the overuse of <div> elements.
[Read more]
Building Better Menus: Comparing ol, ul, and menu in HTML
Many are unfamiliar with an HTML tag is a menu. You might be familiar what an order list (ol) or an unordered list (ul). Let’s take a look at what the difference between those is.
[Read more]
CSS Media Queries in JavaScript
There are many ways to react to layout changes in HTML. You can use Resize Observers, Intersection Observer or Mutation Observers.
[Read more]
CSS Keyframe Animations in SharePoint Framework
Using a @keyframes animation in SPFx might not work for you. The reason is the built-in CSS Modules that needs a special treatment defining the animation and how you have to call them.
First, let’s take a look at the issue.
[Read more]
Develop SPFx web parts for different section designs using CSS
Over the last couple of days, I banged my head against the wall. I hate when things don’t work as expected. On the other hand, I love challenges.
The thing we are talking about the documentation on “Supporting section background“. To be clear, the documentation is correct. It works as described. The issue I and many others have with this documentation it does not apply to your project.
How to identify the font rendered in your Browser?
Track down fonts rendered on a web site sometimes can be challenging. Reply purely on the font family is not a safe bet. The network trace only shows that the font has been downloaded but not that it will be used and applied correctly.
Luckily, the latest versions of all major Browser offer now especially support that makes it easier to identify the real applied font. Besides, never trust what you see in the Browser; it might be something that sits only on your client.
[Read more]
Native lazy-loading images with aspect-ratio
Recently two changes have been shipped with the latest browsers versions that impact your development today too. In short, you can now better define the loading behaviour for images. It’s big news in case of performance and usability. Those changes are:
- Always use height and width on images
- Natively Lazy-load images and iframes
Use ‘lodash’ in SPFx projects – important things to know
Lodash is one of those utility classes many JavaScript developers uses. This modern JavaScript utility library delivering modularity, performance & extras. I agree with most of their marketing terms, but you might run in problems in case of performance when you use it the wrong way and bloat up your SPFx packages.
Optimize your SPFx projects with React.lazy
SharePoint Framework offers you a pretty solid project setup, but on the other hand, it doesn’t give you options to optimise the gulp, build or the webpack configuration.
The more web parts exist in a single project, the slower the build task become and all the code in the project will be compiled at once, instead of smaller incremental builds. Technical possible but not yet supported.
The good thing is that there are some options you can directly trigger from your web part code. Some of these options affect webpack others can be applied in ReactJS. Not only in case of build times but also case of user experience and web part performance.