File size: 9,908 Bytes
a167661 d48db9e a167661 d48db9e a167661 81b4f93 a167661 81b4f93 a167661 81b4f93 a167661 d48db9e 81b4f93 cf9ada6 a167661 cf9ada6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
<!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>
|