Dev Tools¶
Secret knowledge¶
Html Prototype¶
Stack 2020¶
Next.js¶
- Awesome Next.js
- Next.js and Reactstrap Admin Dashboard Project
- nextjs-reactstrap
- Airframe React
- react-admin
- Next.js from the Ground Up
- How Next.js is delivering React’s vision for the future
Samples¶
Shopify¶
Hydrogen¶
Create new project¶
Tailwind CSS¶
- tailwindcss.com
- tailwindcss play
- Integrating Tailwind CSS framework into a SPFx React project for advance User Experience
- react-tailwindcss
- Your First Tailwind Website
- How to build a landing page with Tailwind CSS, Tailwind UI, Vite.js – tutorial video
- Tailwind CSS: From Zero to Production" on YouTube
- Source Code - From Zero to Production
- Awesome list of React Tailwind CSS user interface component libraries
Tailwind & SPFx¶
Design to Code¶
- MS Fabric and Stardust to Fluent UI
- MS Fluent UI Starting
- Design to HTML
- Top 22 Prototyping Tools For UI And UX Designers 2020
Best practises¶
MSDN¶
Tools List¶
- Useful Developer Tools
- My 12 Favorite Chrome Extensions as a Web Developer
- The tools for a SharePoint developer - Part 2
- msportals.io
- SharePoint Quicklinks
- Graph X-Ray
- PnP Sharing is Caring VS Code Extensions
- Tools that I use & ❤️
Framework Trends¶
RegExp¶
Create shortcut(s)¶
Debug¶
TweetDeck (Twitter)¶
PowerShell Module Installs¶
Translation¶
Dokumentation Site Generator¶
ZoomIt¶
Convert / Format¶
Content generators¶
Image Tools¶
- unsplash - free images
- pixabay - free images
- 20 Websites To Find Free High-Quality Images
- mazwai - free background images
- dummyimage
- Screenshots
- Convert Modern SharePoint Page Banner Images to Base-64 using PowerShell
- screenshots tool greenshot
Emoji¶
Sound Tools¶
Password generators¶
GUID¶
JSON¶
Change Log¶
Download Website / offline¶
wget --recursive --no-clobber --page-requisites --html-extension --convert-links --restrict-file-names=windows -domains www.yourwebsite.com --no-parent www.yourwebsite.com/someurl
Email¶
- Responsive Email Foundation Zurb
- mailchimp - newsletter
- 10MinuteMail
- Free Mobile-Friendly & Responsive HTML Email Templates
Ressourcen Files¶
- https://poeditor.com/
- https://github.com/ypcode/spfx-dev-tools (Ressourcen Files mit Excel editieren)
- Excel and PowerShell to maintain your SPFx localized resources
- JavaScript Internationalization Framework
VS.Code¶
C# Development¶
Command Line¶
open last active window
code -r .
open in new window
code -n
VS.Code Extensions¶
- markdownlint
- Introducing SharePoint Typed Item
- Backup and Synchronize VSCode Settings with a GitHub Gist
- Visual Studio Code Extension – Settings Sync
- Top 10 VSCode Extensions for React
- Code Spell Checker
- abracadabra
settings.json
// Is git enabled
"git.enabled": false,
// Path to the git executable
"git.path": null,
// Whether auto fetching is enabled.
"git.autofetch": false,
Info: https://stackoverflow.com/questions/30331338/remove-git-integrations-from-vscode
Configure VSCode Intellisense¶
- Avoid errors editing SharePoint Framework project configuration with Visual Studio Code intellisense
- VSCode SharePoint Framework JSON schemas configuration
Edge Browser¶
Exclude Folders from VS.Code¶
CLI App Generator¶
- generator-sppp
- SharePoint front-end projects automation and tasks tool-belt
- create-react-app
- generator-simplestyle
Fabric Icons¶
- Render Office Fabric UI Icons into Canvas
- Tool to Generate Images Using Office UI Fabric Icons
- Fabric Icons
- Office UI Fabric Icons
- Using Flicon to support visual hierarchy on a homepage
- Microsoft-Integration-and-Azure-Stencils-Pack-for-Visio
Favicons¶
WebSite Builder¶
SP bookmarklets¶
Open Site Settings
javascript:(function(){var url = document.location.href.split('/Pages')[0].split('/SitePages')[0].split('/_layouts')[0];if(url.endsWith('.aspx')){url = url.replace(new RegExp('\/[a-z A-Z 0-1 \- _]*.aspx'),'')}location.replace(url+"/_layouts/15/settings.aspx")}());
Open Page in Maintenance Mode
javascript:(function(){location.replace(window.location.href+"?maintenancemode=true")})();
Go to Classic
javascript:(function(){document.cookie="splnu=0;domain="+window.location.hostname+";"; location.href=location.href;})();
Go to Modern
javascript:(function(){document.cookie="splnu=1;domain="+window.location.hostname+";"; location.href= location.href})();
Open Web Part Manager
javascript:(function(){location.replace(window.location.href+"?contents=1")})();
Delete node_modules Folder¶
-
Firstly install rimraf module globally
npm install rimraf -g
- creat fast-del.bat file
@ECHO OFF
SET FOLDER=%1
IF [%1]==[] (
ECHO Delete Folder: "%CD%"?
PAUSE
SET FOLDER="%CD%"
CD /
)
ECHO Deleting folder %FOLDER%
rimraf %FOLDER%
-
This .bat file should be available under your "PATH" environmental variable. In other words, you should be able to run it from any command-line from any location. The easiest approach is to just copy this file to C:\Windows directory (it's absolutely safe).
-
Open regedit and go to "HKEY_CLASSES_ROOT\Directory\shell\" path.
-
Right-click on the "shell" folder and select New -> Key. Give it the name "Fast Delete".
-
Right-click on a newly created "Fast Delete" folder, then New -> Key. Give it the name "command".
-
Double-click on the default value for "command" folder and under value data enter:
cmd /c "cd %1 && fast-del.bat"
Link Checker¶
- Crawl your website links and images to find broken links/images
- Copy an object from the console
- Check-SPOBrokenLink
copy($$('a').map(a => a.href).join('\n'))
function Get-UrlStatusCode([string] $Url)
{
try
{
(Invoke-WebRequest -Uri $Url -UseBasicParsing -DisableKeepAlive).StatusCode
}
catch [Net.WebException]
{
[int]$_.Exception.Response.StatusCode
}
}
foreach($line in Get-Content C:\url.txt)
{
if($line -match $regex){
$statusCode = Get-UrlStatusCode $line
if($statusCode -le "200")
{
$line + " => OK"
}
else
{
$line + " => Error"
}
}
}