|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Development Tools - The Colorless Wonder</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="card"> |
|
|
<h1>Developer Toolkit</h1> |
|
|
<p>Connect with essential development tools and APIs for building, debugging, and securing applications.</p> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">API Connectors</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<api-connector> |
|
|
<span slot="name">Postman API</span> |
|
|
<span slot="description">Test and document APIs with collections</span> |
|
|
</api-connector> |
|
|
<api-connector> |
|
|
<span slot="name">Burp Suite</span> |
|
|
<span slot="description">Web security testing toolkit</span> |
|
|
</api-connector> |
|
|
<api-connector> |
|
|
<span slot="name">OWASP ZAP</span> |
|
|
<span slot="description">Automated security scanner</span> |
|
|
</api-connector> |
|
|
<api-connector> |
|
|
<span slot="name">Wireshark</span> |
|
|
<span slot="description">Network protocol analyzer</span> |
|
|
</api-connector> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">API Integration Tools</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">OpenAI GPT API</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Integrate powerful AI capabilities into your applications.</p> |
|
|
<a href="https://platform.openai.com/docs/api-reference" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Documentation</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Public APIs Collection</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Access a wide variety of free APIs for development.</p> |
|
|
<a href="https://github.com/public-apis/public-apis" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">GitHub Repository</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Development SDKs</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Frontend Frameworks</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">React, Vue, Angular, and more for building modern UIs.</p> |
|
|
<a href="https://reactjs.org/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">React Docs</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Mobile Development</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Flutter, React Native, and native SDKs for mobile apps.</p> |
|
|
<a href="https://flutter.dev/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Flutter SDK</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Code Generation Tools</h2> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">AI-Powered Code Assistants</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Tools that help you write code faster and more efficiently.</p> |
|
|
<ul class="list-disc pl-5 mt-2 text-sm"> |
|
|
<li>GitHub Copilot</li> |
|
|
<li>Amazon CodeWhisperer</li> |
|
|
<li>Tabnine</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Application Modification Tools</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Browser DevTools</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Inspect, debug, and modify web applications in real-time.</p> |
|
|
<a href="https://developer.chrome.com/docs/devtools/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Chrome DevTools</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Reverse Engineering</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Tools for analyzing and modifying existing applications.</p> |
|
|
<a href="https://ghidra-sre.org/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Ghidra</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Text Replacement Tools</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Powerful find-and-replace across files and projects.</p> |
|
|
<a href="https://www.sublimetext.com/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Sublime Text</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Regex Tools</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Test and debug regular expressions.</p> |
|
|
<a href="https://regex101.com/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Regex101</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Development Environments</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">VS Code</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Popular lightweight editor with extensive extensions.</p> |
|
|
<a href="https://code.visualstudio.com/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Download</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">JetBrains IDEs</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Powerful IDEs for various languages (WebStorm, PyCharm, etc).</p> |
|
|
<a href="https://www.jetbrains.com/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">All Products</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Cloud IDEs</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">GitHub Codespaces, Gitpod, and more.</p> |
|
|
<a href="https://github.com/features/codespaces" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Codespaces</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Terminal Tools</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">iTerm2, Windows Terminal, tmux, etc.</p> |
|
|
<a href="https://iterm2.com/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">iTerm2</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Integration Services</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Zapier</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Automate workflows between apps.</p> |
|
|
<a href="https://zapier.com/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Website</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Make (Integromat)</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Visual automation platform.</p> |
|
|
<a href="https://www.make.com/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Website</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">n8n</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Open-source workflow automation.</p> |
|
|
<a href="https://n8n.io/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Website</a> |
|
|
</div> |
|
|
<div class="border p-4 rounded-lg"> |
|
|
<h3 class="font-medium">Apache Camel</h3> |
|
|
<p class="text-gray-600 text-sm mt-1">Enterprise integration patterns.</p> |
|
|
<a href="https://camel.apache.org/" target="_blank" class="text-blue-500 hover:underline text-sm mt-2 inline-block">Docs</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<a href="index.html" class="text-blue-500 hover:underline">← Back to Home</a> |
|
|
</div> |
|
|
</div> |
|
|
<script src="components/api-connector.js"></script> |
|
|
<script src="components/ide-card.js"></script> |
|
|
<script src="components/ai-chat.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
