I am pretty excited on the last weeks launch of hTWOo. It is time to show you how to get started in the most simple possible way and how to add a simple themed button to your web part.
How to make CSS Variables work in every web part context
In the recent blog post on how to make a web part works with different section backgrounds using CSS variables, I already covered. At the same time, this works perfectly for just regular web parts. There are specific scenarios, where this approach fails.
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 fix Segoe UI font issue with SPFx and Microsoft Teams
When you write a web part, that don’t use Fluent UI or its predecessor Office UI Fabric, you might have recognised Segoe UI from SharePoint is not loaded there.
[Read more]
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.
Tips and Tricks working with SPFx library components
Following the instruction on how to create a library component, get you pretty easy up and running to try out this new feature.
To make it production-ready you have to do some manual steps and tweaks. Here are some suggestions.
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.
SPFx – Reference Webpack configuration – Web Part
The following configuration shows the webpack.js generated during the build process of a SPFx Hello World
wep part. References to fixed path in the generated webpack config were replaced with the default way of resolving path. ( path.resolve(__dir
).
Declutter the console log output in SPFx projects
If you try to log something in your SPFx project, it can be tough to find your ‘console.log’ messages. SharePoint Framework, in that sense, is chatty.