创造

创作

编程语言、工具和框架——每个开发者都受欢迎

代码是我们用来构建未来的语言。从 Python 到 Rust，从 Web 应用到系统编程—— 每个技术栈都受欢迎。找到你的工具，开始创造。

语言和技术

我们使用和喜爱的编程语言

工具和框架

支持你的技术栈

Docker & 容器

容器化一切。在所有平台上共享可复现的环境。

#devops

Kubernetes

大规模编排容器。现代应用的基础设施层。

#云

Git & GitHub

版本控制精通。协作工作流、CI/CD 和开源贡献。

#git

Neovim & VS Code

编辑器之争？我们两者都爱。分享配置、插件和效率技巧。

#编辑器

📜 codespace.html — 语言网格

行数: 156语言: HTML

带工具提示支持的编程语言响应式网格。

<!-- 语言网格组件 -->
<div class="lang-grid">
  <button class="lang-chip" 
    data-tooltip="Python - 数据科学, AI">
    <span aria-hidden="true">🐍</span>Python
  </button>
  <button class="lang-chip" 
    data-tooltip="Rust - 系统, 性能">
    <span aria-hidden="true">🦀</span>Rust
  </button>
  <!-- 更多语言... -->
</div>

<!-- CSS 网格实现 -->
<style>
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
</style>

🎨 工具提示 CSS 样式

组件语言: CSS

通过 JavaScript 定位的浮动工具提示系统，带有淡入淡出过渡效果。

/* 工具提示容器 */
#ctx-tooltip {
  position: fixed;
  z-index: 9998;
  background: rgba(3, 5, 8, 0.98);
  border: 1px solid #00d4ff;
  color: #00d4ff;
  padding: 0.5rem 1rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  max-width: 250px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

#ctx-tooltip.visible {
  opacity: 1;
}

⚡ 工具提示 JavaScript

模块语言: JS

跟随鼠标光标的工具提示系统，悬停时显示。

const Tooltips = {
  init() {
    const triggers = document.querySelectorAll('[data-tooltip]');
    const tooltip = document.getElementById('ctx-tooltip');
    
    triggers.forEach(trigger => {
      trigger.addEventListener('mouseenter', () => {
        tooltip.textContent = trigger.dataset.tooltip;
        tooltip.classList.add('visible');
      });

      trigger.addEventListener('mousemove', (e) => {
        tooltip.style.left = (e.clientX + 15) + 'px';
        tooltip.style.top = (e.clientY + 15) + 'px';
      });

      trigger.addEventListener('mouseleave', () => {
        tooltip.classList.remove('visible');
      });
    });
  }
};

当前项目

🔴 进行中开始时间：2026年3月

STYKALABRIA 网站重新设计

我们目前正在重建我们的网站，重点关注无障碍性、多语言支持以及对各类创作者的友好设计。这个项目展示了我们对包容性和优美代码的承诺。

HTML5 CSS3 JavaScript WebGL

🐙 在 GitHub 上查看加入项目

开始编码？

无论你选择什么语言，这里都有你的位置。加入我们的 Discord，寻找 fellow 开发者，开始你的下一个项目。

加入社区探索项目

创作