An Open-Source Wiki of coding tips, native features, and best practices
DevWonders is a pragmatic, open-source knowledge base designed to streamline development. Instead of relying on heavy third-party libraries (NPM packages) or complex workarounds, this wiki focuses on modern native APIs, lesser-known browser features, and advanced concepts built directly into the web platform.
DevWonders serves as a practical reference guide for developers looking to position UI elements natively, handle complex application states without external dependencies, and utilize advanced terminal workflows efficiently.
Goal: To provide a straightforward repository of clean code principles, native solutions, and practical techniques for modern developers.
The wiki is organized into focused categories, each packed with interactive examples and copy-pasteable code blocks:
- ⚡ HTML: Native
<dialog>modals, theinertattribute for focus trapping, Popover API, and<template>rendering. - 🎨 CSS: Anchor Positioning,
@starting-stylefor discrete animations,light-dark()functions, and modern logical properties. - 🧠 JavaScript:
Object.groupBy(),AbortControllerfor massive event cleanup, native UUID generation, and optional chaining. - 🔧 Git: Advanced terminal workflows including
git worktree,bisectfor tracking regressions, andrererefor conflict resolution. - ⚙️ VS Code & Environments: Productivity shortcuts, multi-cursor editing, and efficiency settings.
- 📐 Best Practices: Clean Code principles, Guard Clauses (Early Return), semantic naming conventions, and pure functions.
This project is a static site built with an absolute focus on performance and simplicity. It requires no installation or build tools to run locally.
- HTML5 (Semantic structure and native interactive elements)
- CSS3 (Custom properties, Flexbox, Grid, and modern CSS features)
- Vanilla JavaScript (ES6+ features, native DOM manipulation)
- Prism.js (For sleek, robust syntax highlighting)
Contributions are highly encouraged. If you know a solid architectural pattern, a native API trick, or a clean code practice, we want it in the wiki.
Here is the step-by-step manual to add a new tip:
- Fork the Repository: Create your own fork of the project.
- Locate the Category: Find the relevant HTML file (e.g.,
html.html,css.html,js.html). If your topic requires a new category, create a new file following the existing layout. - Add Your Section: Copy the structure of an existing
<section>tag. Every tip must include:- An
<h2>title. - A
<p>tag with a clear, direct explanation of the problem and the solution. - A code block properly formatted.
- An
- Format the Code Block: We use Prism.js. Ensure your code is wrapped like this:
<pre> <code class="language-javascript code-block"> // Your code here </code> </pre>
- Add a Live Example (Optional but Recommended): If your tip is visual (HTML/CSS), include an interactive, rendered example directly below the code block using inline styles or utility classes.
- Commit and Push:
git commit -m "Add [Topic] to [Category]"
git push origin main- Open a Pull Request: Submit your PR with a brief description of the native feature or practice you added.
This project uses a Dual-License approach to ensure the freedom of the code snippets while protecting the original content and structure of the wiki:
Code Snippets: All code blocks (<pre><code>) and technical examples are released under the MIT License. You are free to copy, modify, and use them in your personal or commercial projects without any restrictions.
Content & Design: The written explanations, documentation, website design, and overall architecture of DevWonders are released under the Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license. If you remix, transform, or build upon the material, you must distribute your contributions under the same license and give appropriate credit.
See the LICENSE file for more details.