Stefan Bauer's Speaker Profile @ Sessionize

Yo SharePoint - I want to extend

The latest version of the SharePoint Framework generator has a lot of significant improvements for the developer. One of those capabilities is to extend the default Yeoman generator with custom frameworks, tools and configurations specific to your next project.
Help you speed up your customisation, the Pattern and Practice initiative provides you with some pre-built Yeoman generators supporting HandlebarsJS, VueJS with additional extensions such as jQuery and pnpjs.
In this session you learn:
- Core concepts of Yeoman
- The architecture of extension generators such a PnP SPFx
- How to upgrade to upcoming SPFx releases with ease
- Additional configurations for your organisational needs

Upgrade to the Moderne era

Like in architecture, software development and design can be categorised in different time spans. We can scrap a building or our code and build something entirely from scratch, but we don't need to.
This session is targeted to show pattern and practices to bring components from the classic experience to the modern SharePoint experience.
It teaches you how to use third-party JavaScript and design components you used before and integrated those in the SharePoint FrameWork.
To be more specific you learn:
- Overall upgrade workflow from classic to modern
- Modern CSS techniques and what to use
- CSS core concept in SPFx
- Limitations and solutions working with third-party design components

Things I learned on Fluent Design building hTWOo UI

This session gives tips, tricks and guidance on how to build great solutions in the Microsoft 365 Ecosystem that are performant, accessible and use the latest web technologies.

Learn how to make your code more efficient, reusable and better testable.

Tips & Tricks making SharePoint Web Parts and Extensions Responsive

First party web parts in SharePoint are perfectly responsive and look great any device. This session will help you with what you need to know to accomplish the same wonderful experience for your customers too.
Responsive web design at the moment only allows adopting the user experience based on base on the overall page dimensions. Web Parts and extension are only components on a page a need to be designed and developed differently.
Learn how you can properly develop the design of your web parts using the context your component has been embedded on the page. I case you like to embed your web part in Microsoft Teams the experience needs to be addressed there as well.
In this session you get a better understanding of how the responsive design in SharePoint is implemented, can be implemented to give your customer great user experience.

Things I learned on accessibility building a Fluent Design framework for everyone

Fluent Design is great. It also comes with a couple of downsides., with only one downside. It only supports one a couple of predefined Frameworks and is not for everyone.
When I started to create an HTML/CSS based Framework that speaks the same design language, the first and foremost goal was to develop it with accessibility first.
Join me in this session where I search my lessons learned with you to help you bring better accessibility on the web, test it and provide a great user experience for everyone.

Things I learned on accessibility building a Fluent Design framework for everyone

Fluent Design is great. It also comes with a downside. It only supports a couple of predefined Frameworks and is not for everyone.
When I started to create a Framework that speaks the same design language, the first and foremost goal was to create it with accessibility first.
In this session I'll share the lessons I learned to help you bring better accessibility on the web, test it and provide a great user experience for everyone.

This session will cover what I’ve learned on accessibility, tools and useful resources to get everyone started building better accessible solutions on the web.

Things I learned on accessibility building a Fluent Design framework for everyone

Fluent Design is great. It also comes with a couple downsides., with only one downside. It only supports one a couple a predefined Frameworks and is not for everyone.
When I started to create a Framework that speaks the same design language, the first and foremost goal was to create it with accessibility first.
Join me in this session where I search my lessons learned with you to help you bring better accessibility on the web, test it and provide a great user experience for everyone.

This session will cover what I’ve learned on accessibility, tools and useful resource. To get everyone started building better accessible solutions on the web.

The benefits of 3D and why it is important for Microsoft 365

This is currently just an idea that shows how industries work already for a long time with 3D and how the customer can benefit from the options. This what use cases can be covered in case of collaboration.

What are the tools available on the market and easy it is to getting started with 3D nowadays. Adobe Dimensions, Paint 3D. The workflow of a creative creating for example package design.

Theming web parts - A beginner guide make your web part work with any applied theme to SharePoint

Develop web parts around a fixed defined colour palette might helps you to achieve the goal. Why not write a web part that used the SharePoint Design defined colours instead. This way all custom web part doesn't look like aliens on a page and smoothly integrate to the overall user experience.
SharePoint Framework offers a way to make web parts with colours defined outside of the web part context and reuse the design that already is applied on a page.
Learn what stepping stones exist using SharePoint theming in web parts. This session shows you how to use the full potential in theming web parts to make sure they play nicely in every environment.
After this session, you learn all you need to know about web part development and branding web parts.

Style your intranet with a style guide

Customisations in SPFx and Microsoft can be time consuming. Wireframe applications such as Figma or Adobe XD can give a good impression of the overall look but not the feel. No one will ever create a documentation on the designed of applications.
What if you can sketch, build and document everything to speed up your development later for the Microsoft 365 Eco system.
Learn in this session what a style guide is and how a style guide improve your development workflow and make documentation of the UI/UX a no-brainer. It will also help to work designer and developers better together. The tools for that might be already near you.

Style your intranet with a style guide

Customisations in SPFx and Microsoft can be time consuming. Wireframe applications such as Figma or Adobe XD can give a good impression of the overall look but not the feel. No one will ever create a documentation on the designed of applications.
What if you can sketch, build and document everything to speed up your development later for the Microsoft 365 Eco system.
Learn in this session what a style guide is and how a style guide improve your development workflow and make documentation of the UI/UX a no-brainer. It will also help to work designer and developers better together. The tools for that might be already near you.

Style Guide for Developers

Customisations in SPFx and Microsoft can be time-consuming. Wireframe applications such as Figma or Adobe XD can give a good impression of the overall look but not the feel. No one will ever create documentation on the design of applications.
What if you can sketch, build and document everything to speed up your development later for the Microsoft 365 Ecosystem?
Learn in this session what a style guide is and how a style guide improves your development workflow and makes documentation of the UI/UX a no-brainer. It will also help to work designers and developers better together. The tools for that might be already near you.

SASSy web parts with SPFX

For more than one decade no other SASS revolutionised the way we write CSS nowadays. In modern SharePoint development, this is the core ingredient to deliver optimised and well architecture.
SASS is also one of the core ingredients to develop new customisations for SharePoint through SPFX.

This session will give you an overview of the most useful concepts in SASS. Besides you will get to know some limitations in SPFX and how to handle those properly.

After this session you will be able to:
• Sketch and develop web parts faster
• Create your reusable CSS
• Apply themes to your web parts
• Handle external CSS properly in SPFX

SASSy web parts with SPFX

For more than one decade no other SASS revulotionised the way we write CSS nowadays. In modern SharePoint development this is the core ingredient to deliver optimised and well architectured.
SASS is also one of the core inredients to develop new customisations for SharePoint through SPFX.

This session will give you an overview of the most important concepts in SASS. In addition you will get to know some limitations in SPFX and how to handle those properly.

After this session you will be able to:
• Sketch and develop web parts faster
• Create your own reusable CSS
• Apply themes to your web parts
• Handle external CSS properly in SPFX

Reuse Code + Designs Strategy - A Case Study

Have you ever wondered how to efficiently reuse a web part component without duplicating code? This session explores practical strategies for avoiding code redundancy and maximizing the value of your components.

To tackle the challenge of code sharing, we'll share a design and development workflow refined over the past five-plus years. From requirements to release, we'll guide you through our streamlined process, including architecture, design, style development (HTML + CSS), development (Type/JavaScript), QA, and release.

Join us for concise insights and tips to simplify the reuse process, enhancing the efficiency of your development tasks.

When designers and developers meet each other where they're at, wonderful things can happen.

Organisational consideration on SPFx

With the availability of the new SharePoint Framework, the complete development landscape is changed. We use new tools. New Workflows and the approach is open to a larger landscape.
The challenge you are now facing what can you do to make all the tools available in the wild to make it more manageable in your organisation. It gives you an Idea how to build up an organisation library of asset and make use of SPFx.

I will show you what it needs to:
* Create first NPM Packages
* Add reusable Assets to that package
* Add third-party libraries for reuse
* Manage Versions
* Create an NPM registry for your organisation

Master the Grid: SharePoint and Teams Practical Guidance

Unlock the full potential of SharePoint and Teams by mastering the SharePoint layout system. Have you wondered how to integrate web parts seamlessly across various SharePoint layouts? Join us for practical insights on enabling your developed web parts to function flawlessly, adapting seamlessly to any context in which they have been embedded.

Discover expert theme handling to maintain a consistent appearance in SharePoint and Microsoft Teams. Acquire a comprehensive skill set and toolkit to make your web parts look as if crafted by Microsoft. As a valuable bonus, explore how to apply these techniques in customization using the PnP Search Web Part. Learn to enhance your projects and provide users with a seamless experience. Leave with the knowledge and tools to elevate your SharePoint and Teams development endeavours.

Library components the next step to build your own UI Components

With SharePoint Framework 1.9.0 a new project type got introduced. Library components let you reuse development components in other projects. This gives you the perfect tool at hand. While it is primarily intended to use for code components it is the right tool to manage and use user interface components too.
This session shows you how you can leverage library components to solve a user interface problem once and apply the same logic to another custom component too. Learn what you need to know about build, bundle and package this user interface component.
It enables you to make your next project easier to test and make sure that keep the code consistent in your team. It shows how especially the perfect workflow between designer and developer can look like.

Increase productivity with PnP/SPFx

PnP/SPFx comes with many enhancements that allows you to increase your productivity for any kind of project.

- Consistent CSS Formating
- Improve Solution versioning
- Common used addons.

Goodbye Internet Explorer - Improve your development

With the Internet Explorer out of the door, are you ready to upgrade your skills to a completely new development world?
You might have heard that grid and flex-box are now tools to create new layouts. These CSS features are just the tip of the iceberg. Come with me and discover many more tools and APIs that improve your web, SPFx, and Teams development.

Goodbye Internet Explorer - Learn new ways for the web.

With Internet Explorer out of the door, are you ready to upgrade your skills to a new world of development?
You might have heard that grid and flex-box are now tools to create new layouts. These CSS features are just the tip of the iceberg. Come with me and discover a lot more tools and API that improves your web, SPFx and Teams development.

Learn about fascinating new APIs and what's hot in the web world to bring it to Microsoft 365 safely.

Getting started with 3D in SharePoint and Microsoft Spaces

Microsoft Spaces use BabylonJS to render 3D elements. This session gives you insight into the very basic terms you might be familiar when you try to start creating experiences in 3D for SharePoint and Office 365.

Once the basics are set it is easy for you to get started.

From Design to a Modern Style Guide – Branding Strategies for SP, Addins and SPFx

Get an introduction on how to create and develop your own style guide for SharePoint, Office Add-ins or web application. It will help you save time during development and for future adoptions. You will learn how to maintain your code and documentation at the same time. Start to develop maintainable, reusable and re-factorable design patterns now and learn what css frameworks can’t do for you. In addition see a demo the Style Guide Application Stefan created especially for SharePoint on-premises and on Office 365.

Benefits of Attending this Session:

Improve style and design documentation
Learn what a modern workflow inspired by state of the art web development workflow looks like
Improve workflow with your team, customer and designers

From Design to Success: SharePoint Framework Form Customization

The SharePoint Framework allows you to enrich the experience of Microsoft List forms in a new way apart from Power Apps.
Get a fresh look at how to design and develop forms in SharePoint that meet your responsive design requirements of your data and your organisation.
Get to know some well-kept secrets of HTML that help you write less code for your engaging experience.
Takeaways from this session:
- Responsive design pattern specifically for forms
- Become from zero to form validation hero
- Enrich the form user experience through conditional sections
- Learn accessibility guidelines specifically for forms.

For SharePoint Framework I need to learn React? The answer is no.

SharePoint Framework was designed to work with many popular frameworks on the web and is not exclusively for ReactJS only. This session helps you what options you have to use your favourite Framework for SharePoint and Microsoft Teams development.
The open-source SharePoint Pattern and Practices team released a Yeoman generator support many options to develop web parts in Angular, VueJS and Handlebars. It gives creates an enhanced project setup without any manual configuration needed.
Beside different web development framework, it includes testing frameworks, code analysis options or the integration in a CI/CD DevOps integration that increase your productivity.
Learn what options you have to fire start your next project.

Explore Adaptive Card Design: Principles for Pixel-Perfect and Reusable Experiences

Uncover the essentials of crafting Adaptive Cards in our session, "Adaptive Card Design 101."

Learn fundamental design techniques to create versatile and reusable pixel-perfect designs tailored to your card's requirements.

Discover how to effectively utilize the latest front-end technologies to enhance the engagement of your extensions. Whether you've glimpsed these cards in sample galleries, blogs, or Microsoft Products, this session is designed to provide practical insights without assuming extensive prior knowledge. Join us to refine your design skills and gain the tools to create adaptive and reusable card designs for your projects.

Elevating Your User’s Experience: Creating Custom Designed SharePoint List Forms with SPFx

Is your organization using SharePoint as the platform for data management and collaboration? While out-of-the-box functionalities are robust, tailoring user experiences to specific organizational needs often requires a more customized approach. Enter SharePoint Framework (SPFx). With SPFx we can create a custom solution within our organizations SharePoint environment that creates a better user experience, facilitates better business processes, and helps to drive adoption.

This developer session is dedicated to exploring the art and science of creating custom-designed SharePoint list forms using SharePoint Framework. Attendees will learn how to use SPFx, leveraging its capabilities to design intuitive, visually appealing, and highly functional list forms that elevate user productivity and satisfaction. We will explore some key design principles to think about when building forms, and some community tools to help make that design easier.

Design and Styling 101 for SharePoint and Teams

This workshop you will make you a design and styling hero for your solutions in SharePoint Framework and Teams solutions.
First you learn the basics how styles are generated and SPFx and can be easier managed. Learn how to share styling across multiple projects easily.

Upgrade you skills to the latest development and web design techniques. Get to know current limitations in CSS and learn which frontend web APIs JavaScript helps you with.

Your real world scenarios are welcome too!

Also covered
- CSS Modules
- CSS Custom Properties
- Media Queries in CSS and JavaScript
- Advanced Media Queries for devices
- Font Handling
- Grid vs Flexbox
- SVG's in SPFx

Create a Compelling Employee Experience with Brand Center

Establishing a consistent brand identity is essential for any organization especially when it comes to internal communications and employee experience. Brand Center empowers businesses to expose their brand identity seamlessly across various channels in Microsoft 365. This session delves into the core functionalities and capabilities of Brand Center, unlocking a world of creative possibilities for enterprises of all sizes.

Join us as we explore the features of the Brand Center, offering attendees a comprehensive understanding of its tools and capabilities. We will look at practical applications of Brand Center in SharePoint and Viva Connections, how to get started, and some things to avoid as you start your brand journey.
In this session we will explore

• What is Brand Center and why it is important.
• Key functionality of Brand Center including font, theme, and asset management for your organization.
• How to get started rolling out Brand Center for your organization.
• Governance questions and thoughts
• Potential roadblocks and pitfalls
• Look at real world examples of organizations leveraging Brand Center

This session is designed for marketing professionals, brand managers, or communication specialists who are looking for ways to explore their brand within the Microsoft ecosystem.

Design + Development: A Case Study

When designers and developers meet each other where they're at, wonderful things can happen. This session will focus on sharing the design and development workflow that we've evolved and refined over the past four plus years of collaboration. Starting from requirements we'll move though our process of architecture, design, style development (html + css), through development (Type/Java Script) to QA, and finally release.

Build accessible solutions in SPFx

Accessibility is about making content and application to as many people as possible. It not only focuses on browser and devices but also on people with that need enhancements to consume the content.
With the rise of JavaScript frameworks such as ReactJS, as convenient as they are for developer and end-users, unique methods need to be implemented to improve the accessibility.

This session gives you an overview of:
- What is WAI-Aria?
- How does it affect your development
- How to test accessibility?
- Accessibility in Office UI Fabric

Ask Me Anything! Bring your questions for discussion

An open and wide-ranging discussion about Microsoft 365 moderated by Mike Gilronan and curated by you! Bring your questions to ask our panel on any subject related to the Microsoft 365 platform.

!important Things in CSS/SASS for SharePoint and SPFx

This update will give you a skill upgrade to the latest methods in web development. Learn how you can benefit from using SASS for classic SharePoint branding as well as Web Parts written in the new SharePoint Framework. This tutorial is structured in four modules:

– CSS basics, common issues and modern techniques
– Base concept of SASS, Helper, programming concepts
– Style Guide, Pattern Libraries and naming conventions
– Bring your patterns and components to life in SPFx

This workshop enables you to write more efficient, cleaner and better CSS. You will learn how to develop reusable pattern and components and apply them to the modern, as well as the classic experience, in SharePoint and Office 365. Finally, you will also learn how to deal with a responsive web design requirement apart from Frameworks.

Benefits of Attending this Tutorial:

Learn common tips and tricks to solve problems with CSS faster
Write better and more maintainable code
Learn common techniques to improve a responsive experience

Stefan Bauer

Actions

Links

ESPC24 Sessionize Event

2024 Microsoft 365 Conference Sessionize Event

May 2023 Microsoft 365 Conference Sessionize Event

CollabDays New England - Microsoft 365 - 2022 Sessionize Event

The North American Collaboration Summit 2022 Sessionize Event

CollabDays New England - Microsoft 365 2021 Sessionize Event

PnP Virtual Conference - September 2020 Sessionize Event

The North American Collaboration Summit 2019 Sessionize Event

Office 365 and SharePoint Connect 2018 Sessionize Event

SharePoint Saturday Netherlands 2018 Sessionize Event

European Collaboration Summit 2018 Sessionize Event

Stefan Bauer

Links

Actions