Tools
General tools
| Site Name | Description |
|---|---|
| Photopea | Free Photoshop web app alternative |
| Polotno Stidio | Free Canva alternative |
| MyBib | A web app for citation purposes |
| Colorffy | The easiest CSS color gradients generator |
| Shape Divider | Our Shape Dividers are premade SVG shapes that are not dynamic to the settings you use on the toolbar. |
| manifest.json generator | Generate base manifest.json and icons |
| Calendar Scheduler | Scheduling infrastructure for absolutely everyone. |
| Github Profile ReadMe Generator | 🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI. |
| How to GraphQL | Tutorial How to GraphQL |
| Get Waves | Free SVG generator (waves motives) |
| BGJar | Free SVG background generator |
| N Package | Interactively Manage Your Node.js Versions |
| Free For Dev | This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers |
| Customize Terminal - ohmyz | Customized Terminal. I like it, especially now I work using Macbook |
| Material Design Color Tool | Create and share color pallete tool |
| Sonarcloud | Code analyzer |
| CodeFactor | Another Code analyzer |
| Depfu | Automated Dependencies updater bot |
| Responsively | Helps to preview the UI responsively |
| Bleachbit | Like CCleaner which clean your disk |
| Open Graph | Check the meta tag of a site |
| Github Socialify | Generate image for readme at git repo |
| Open Graph Image as a Service | My current self-hosted Open Graph Image Generator |
| Markdown Table Generator | Markdown table generator |
Prototyping Tools
| Site Name | Description |
|---|---|
| Framer | App prototyping tool |
| Diagrams | Build workflow or flowchart |
| Jamboard | Google's digital whiteboard |
| Excalidraw | Jamboard alternative |
Performance Measurement Tools
VS Code Extension
| Site Name | Description |
|---|---|
| Auto Rename Tag | To rename the beginning and the end of a tag easily |
| Bracket Pair Colorizer | To give color for bracket |
| Material Design Icon | To give colorful and beautiful icon in VS Code side bar when open a project folder |
| Conventional Commits | Git commit message template |
| CSS Peek | To peek the CSS snippet of an ID or class element |
| Discord Presence | Display VS Code presence in Discord |
| ES7 React | Suggestion code for React |
| ESLint | Linter for JS or TS |
| Git Graph | Visualize the git flow |
| Highlight Matching tag | Highlight the matching tag |
| Indent Rainbow | Give beautiful color for indentation |
| CSS Intellisense | Give CSS suggestion |
| Emoji Sense | An emoji Intellisense |
| Night Owl Theme | My current favourite VS Code theme |
| Prettier | To beautify the code format and structure |
| Better Comment | Give different color highlights for different comment type |
| Turbo Console log | Console log shortcut |
| Github Copilot | AI Pair Programmer |
Chrome Extensions
| Extension Name | Description |
|---|---|
| Font Picker | To 'steal' font family in a site |
| GoFullPageScreenShot | To take full-page screenshot |
| Grammarly for Chrome | Check and fix grammar |
| JSON Viewer | Make JSON data more readable in web |
| React Dev Tools | Help to debugging React App |
| Wappanalyzer | Analyze the website build with which frameworks or library |
| CSS Peeper | Take the styling end even assets of a site |
ESLint Favourite Plugins
| Plugin's name | Description |
|---|---|
| prettier-plugin-tailwindcss | Automatic Class Sorting for Tailwind CSS |
| @typescript-eslint/eslint-plugin | ESLint Plugin for Typescript |
| eslint-plugin-import | ESLint Plugin Import Sequence |
| eslint-plugin-unused-imports | ESlint Plugin to seperate unused vards and unused import |