isometric-contributions
Browser extension for rendering an isometric pixel art version of your GitHub contribution graph.
Top Related Projects
abusing github commit history for the lulz
💥 A curated list of Terminal frameworks, plugins & resources for CLI lovers.
😎 Awesome lists about all kinds of interesting topics
A supercharged Git/GitHub command line interface (CLI). An official integration for GitHub and GitHub Enterprise: https://github.com/works-with/category/desktop-tools
Quickly browse the history of a file from any git repository
A guide to learn bash
Quick Overview
Isometric Contributions is a browser extension that transforms the GitHub contributions graph into an isometric 3D view. It provides a visually appealing and unique way to display a user's contribution history on their GitHub profile page.
Pros
- Enhances the visual appeal of GitHub profiles
- Offers a unique perspective on contribution data
- Customizable color schemes to match user preferences
- Lightweight and easy to install
Cons
- May not accurately represent contribution volume due to 3D perspective
- Limited to GitHub's contribution data (doesn't include external contributions)
- Potential performance impact on slower devices or browsers
- Not officially supported by GitHub, so it may break with future updates
Getting Started
-
Install the browser extension:
- For Chrome: Visit the Chrome Web Store and click "Add to Chrome"
- For Firefox: Visit the Firefox Add-ons page and click "Add to Firefox"
-
Navigate to any GitHub profile page (including your own)
-
The contributions graph will automatically be transformed into an isometric view
-
To customize colors, click the extension icon in your browser toolbar and select your preferred color scheme
Note: No coding is required to use this extension. It's a plug-and-play solution for enhancing GitHub profile visuals.
Competitor Comparisons
abusing github commit history for the lulz
Pros of gitfiti
- Allows for custom pixel art designs in the GitHub contribution graph
- Provides a command-line interface for easy usage
- Supports generating commits for specific dates
Cons of gitfiti
- Requires manual setup and execution of scripts
- Limited to modifying the GitHub contribution graph only
- May be considered less ethical as it artificially inflates contribution counts
Code Comparison
gitfiti:
def generate_git_commands(art):
commands = []
for y, row in enumerate(art):
for x, col in enumerate(row):
if col:
date = get_date_string(x, y)
commands.append("GIT_AUTHOR_DATE={0} GIT_COMMITTER_DATE={0} git commit --allow-empty -m 'gitfiti' > /dev/null".format(date))
return commands
isometric-contributions:
function getContributionCount(day) {
const count = day.getAttribute('data-count');
return parseInt(count, 10) || 0;
}
function createIsometricBlock(x, y, z) {
const block = document.createElement('div');
block.className = 'iso-block';
block.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
return block;
}
The code snippets show that gitfiti focuses on generating Git commands for creating commits, while isometric-contributions is concerned with rendering the contribution graph in an isometric view using JavaScript and DOM manipulation.
💥 A curated list of Terminal frameworks, plugins & resources for CLI lovers.
Pros of terminals-are-sexy
- Comprehensive resource for terminal customization and tools
- Regularly updated with community contributions
- Covers a wide range of terminal-related topics
Cons of terminals-are-sexy
- Not an interactive tool or visualization
- Requires manual implementation of listed resources
- May be overwhelming for beginners due to the large amount of information
Code comparison
While a direct code comparison isn't relevant due to the different nature of these projects, here's a brief overview:
isometric-contributions:
function getContributionsByDay(contributions) {
return contributions.reduce((acc, day) => {
acc[day.date] = day.count;
return acc;
}, {});
}
terminals-are-sexy:
## Shells
* [Bash](https://www.gnu.org/software/bash/) - GNU Project's shell (Bourne Again SHell).
* [Fish](https://fishshell.com/) - Smart and user-friendly command line shell.
* [Zsh](https://www.zsh.org/) - Powerful shell with scripting language.
isometric-contributions is a JavaScript-based tool for visualizing GitHub contributions in an isometric view, while terminals-are-sexy is a curated list of terminal resources in Markdown format. The code snippets demonstrate their different purposes and implementations.
😎 Awesome lists about all kinds of interesting topics
Pros of awesome
- Comprehensive curated list of resources across many topics
- Large community-driven project with frequent updates
- Useful for discovering high-quality tools and libraries
Cons of awesome
- Not an interactive or visual tool
- Requires manual browsing to find relevant information
- Can be overwhelming due to the sheer volume of content
Code comparison
Not applicable, as awesome is a curated list of resources and doesn't contain code to compare directly with isometric-contributions.
Additional notes
isometric-contributions is a browser extension that provides a 3D isometric view of GitHub contribution graphs, while awesome is a curated list of lists covering various programming topics and resources.
isometric-contributions focuses on enhancing the visual representation of a specific GitHub feature, while awesome aims to be a comprehensive reference for developers across multiple domains.
The target audiences differ: isometric-contributions appeals to GitHub users interested in visualizing their contributions, while awesome serves as a general resource for developers seeking high-quality tools and libraries across various topics.
A supercharged Git/GitHub command line interface (CLI). An official integration for GitHub and GitHub Enterprise: https://github.com/works-with/category/desktop-tools
Pros of gitsome
- Offers a comprehensive CLI for GitHub with features like autocomplete and syntax highlighting
- Provides a broader range of functionality, including repository management and issue tracking
- Actively maintained with regular updates and improvements
Cons of gitsome
- More complex to set up and use compared to the simplicity of isometric-contributions
- Requires Python installation and additional dependencies
- May have a steeper learning curve for users unfamiliar with command-line interfaces
Code Comparison
isometric-contributions (JavaScript):
function getContributions(username) {
return fetch(`https://github.com/users/${username}/contributions`)
.then(response => response.text())
.then(html => parseContributions(html));
}
gitsome (Python):
@click.command()
@click.argument('query')
def search_repos(query):
"""Search for repos."""
github_cli.search_repositories(query)
While isometric-contributions focuses on visualizing GitHub contributions, gitsome provides a more comprehensive set of GitHub-related functionalities through its command-line interface. The code snippets demonstrate the different approaches: isometric-contributions uses JavaScript to fetch and parse contribution data, while gitsome utilizes Python with the Click library to create CLI commands for various GitHub operations.
Quickly browse the history of a file from any git repository
Pros of git-history
- Provides a visual history of file changes over time
- Allows users to view and interact with specific commits
- Supports multiple file formats and programming languages
Cons of git-history
- Focuses on individual file history rather than overall contribution visualization
- May be less visually appealing for showcasing long-term contribution patterns
- Requires more user interaction to explore the full history
Code comparison
isometric-contributions:
function createIsometricContributions(data) {
const svg = d3.select("#contributions")
.append("svg")
.attr("width", width)
.attr("height", height);
// ... (additional code to create isometric view)
}
git-history:
function renderFileHistory(commits) {
return (
<div className="file-history">
{commits.map(commit => (
<Commit key={commit.sha} {...commit} />
))}
</div>
);
}
While isometric-contributions focuses on creating a 3D visualization of GitHub contributions, git-history emphasizes rendering the history of individual file changes. The code snippets reflect these different approaches, with isometric-contributions using D3.js for SVG manipulation and git-history utilizing React components to display commit information.
A guide to learn bash
Pros of bash-guide
- Comprehensive educational resource for Bash scripting
- Well-organized content with clear explanations and examples
- Regularly updated with community contributions
Cons of bash-guide
- Limited visual appeal compared to isometric-contributions
- Lacks interactive elements or visualization tools
- May be overwhelming for absolute beginners
Code Comparison
bash-guide example:
#!/bin/bash
echo "Hello, World!"
isometric-contributions example:
const svg = d3.select("svg");
const projection = d3.geoIsometric();
While bash-guide focuses on providing textual explanations and code snippets for Bash scripting, isometric-contributions is primarily a JavaScript-based visualization tool. The code examples reflect their different purposes, with bash-guide demonstrating basic Bash syntax and isometric-contributions showcasing D3.js for creating isometric visualizations.
bash-guide serves as an excellent reference for learning Bash scripting, offering a wide range of topics and examples. On the other hand, isometric-contributions provides a unique and visually appealing way to display GitHub contribution data, which may be more engaging for some users but less educational in terms of programming concepts.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
GitHub Isometric Contributions extension
This is a browser extension for Chrome/Brave and Firefox that lets you toggle between your regular GitHub contribution chart and an isometric pixel art version. It uses obelisk.js for the isometric graphics.
Besides being sort of neat looking, this view is interesting in that it highlights the differences between the number of contributions with more granularity. This isn't meant to completely replace the standard 2D graph though, because in most ways it is actually less useful. For example, there are no axis labels, shorter bars can be hidden behind taller ones, you can't hover over a bar to see the day and count, etc.
Installation
Chrome/Brave
Install from the Chrome Web Store
Firefox
Install from Mozilla Add-ons site
Microsoft Edge
Install from Microsoft Edge Add-ons site
Contributing
Note that I don't currently have any plans for adding new features to the extension. Please contact me before submitting a PR with new functionality.
If you want to hack on the extension, you'll need to install it manually. First clone or fork this repo. Then, on your Chrome Extensions page, make sure "Developer mode" is checked. You can then click the "Load unpacked extension..." button and browse to the src
directory of this repo.
To hack on the extension, you'll first need to make sure you've installed it in Developer mode (see above). Once you've made changes to the extension, go back to the Extensions page and click the Reload link under the extension entry.
License
This project is licensed under the MIT License.
Top Related Projects
abusing github commit history for the lulz
💥 A curated list of Terminal frameworks, plugins & resources for CLI lovers.
😎 Awesome lists about all kinds of interesting topics
A supercharged Git/GitHub command line interface (CLI). An official integration for GitHub and GitHub Enterprise: https://github.com/works-with/category/desktop-tools
Quickly browse the history of a file from any git repository
A guide to learn bash
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot