loading...
Cover image for 22 Shout-Outs to Open Source and Infinite Creativity ❣

22 Shout-Outs to Open Source and Infinite Creativity ❣

devmount profile image Andreas ・6 min read

Sorry if this is a bit emotional, but I just have to say this now. Even at the risk of boring some of you. This isn't another Vue vs React vs Angular post—it's more like the opposite.

I love the open source community. I really do. It's simply amazing what people are capable of to make things easier to use, make things more performant, build things to connect and find solutions for complex problems — in short: make the life of other developers and users easier and help each other out — even without being paid (in many cases)! I don't know another professional area where this is the case to this extent.

Sometimes when exploring Github repositories, I'm especially impressed by how creative people are when it comes to create a logo for their extension of an existing framework. So I thought it would be nice to just showcase some totally random projects to see how colorful and creative Open Source is! And maybe there are some you haven't heard about yet and are useful for your current project.

But even if not, let's take this as inspiration and motivation for our own Open Source contributions and projects in 2020!

Vue.js

Let's start with some Vue.js projects I found on Github. Here is the original logo:

Vue.js logo

1. vee-validate

This framework allows you to validate inputs and display errors. How efficiently simple the Vue.js logo was changed here to represent validation ✅!

vee validate logo

GitHub logo logaretm / vee-validate

Template-driven Form Validation for Vue.js ✅


2. Awesome Vue.js

A very very long list of projects related to Vue.js. And of course, what doesn't look awesome with sunglasses 😎!

awesome vue logo

GitHub logo vuejs / awesome-vue

🎉 A curated list of awesome things related to Vue.js


3. BootstrapVue

An implementation of the Bootstrap v4 component and grid system for Vue.js.

BootstrapVue logo

GitHub logo bootstrap-vue / bootstrap-vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.


4. Vuefire & Vuexfire

A really handy package for those using Firebase/Firestore with Vue.js. I like how the Vue.js logo becomes a stylised torch 🔥!

Vuefire logo

GitHub logo vuejs / vuefire

🔥 Firebase bindings for Vue.js & Vuex


5. Vue Styleguidist

A Vue.js development environment with a living style guide. Nice tie 👔!

Vue Styleguidist logo

GitHub logo vue-styleguidist / vue-styleguidist

Created from react styleguidist for Vue Components with a living style guide


6. vuesion

Build production-ready PWAs with this Vue.js boilerplate. Not much left of the Vue.js logo 🕶!

vuesion logo

GitHub logo vuesion / vuesion

The most complete boilerplate for production-ready PWAs. With focus on performance, development speed, and best practices


7. electron-vue

Build electron applications with this Vue.js boilderplate. You don't always have to modify the Vue.js logo, sometimes using the Vue.js colors is enough ⚛!

electron-vue logo

GitHub logo SimulatedGREG / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.


8. Vuesax

A component framework based on Vue.js. Color gradients ftw 🎨!

Vuesax logo

GitHub logo lusaxweb / vuesax

New Framework Components for Vue.js 2


9. VueUse

And some utilities of the Vue Composition API. Need a logo for your Vue.js project? Just change the letter 😅!

VueUse logo

GitHub logo antfu / vueuse

🧰 Collection of Composition API utils for Vue 2 and 3


React.js

Now let's see some examples from the React.js community. Here is the original logo:

React.js logo

10. Redux

A popular predictable state container for JavaScript apps that can be used together with React (but also with any other view library).

Redux logo

GitHub logo reduxjs / redux

Predictable state container for JavaScript apps


11. React-Leaflet

Some React components for Leaflet maps. A logo showing React on a leaf 🍃 ... or is it a map marker?

React-Leaflet logo

GitHub logo PaulLeCam / react-leaflet

⚛️ React components for 🍃 Leaflet maps


12. React SVG morph

A library to morph SVG components one into another. Here an example showing the authors love for React ♥!

React SVG morph logo

GitHub logo gorangajic / react-svg-morph

🔮 morph your svg component one into another other


13. React Cosmos

A development environment for building scalable, high-quality user interfaces. Not exactly the React logo, but both logos show some kind of cosm 🚀! Don't they?

React Cosmos logo

GitHub logo react-cosmos / react-cosmos

Dev environment for building scalable, high-quality user interfaces


14. Reactotron

An app for inspecting React JS and React Native apps. Hello again color gradients 😅!

Reactotron logo

GitHub logo infinitered / reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.


15. React Styleguidist

As we've already seen for Vue.js, here is the React version of the Styleguidist with a completely different logo... 🐙!

React Styleguidist logo

GitHub logo styleguidist / react-styleguidist

Isolated React component development environment with a living style guide


Angular

At last let's see what's out there for Angular. Here is the original logo:

Angular logo

16. NG Bootstrap

Bootstrap 4 Angular widgets. The original logo in layers and with another letter 🛡!

NG Bootstrap logo

GitHub logo ng-bootstrap / ng-bootstrap

Angular powered Bootstrap


17. Awesome Angular

As we've already seen for Vue.js: Here is an awesome version of Angular. Why not simply reusing the original logo 💡!?

Awesome Angular logo

GitHub logo PatrickJS / awesome-angular

📄 A curated list of awesome Angular resources


18. ngx-materialize

Another Angular wrap around the Materialize library. The Angular logo materialized!

ngx-materialize logo

GitHub logo sherweb / ngx-materialize

Angular wrap around Materialize library


19. NG-ZORRO

A combination of Ant Design and Angular which is also visible in a unified logo 🤝🏻!

NG-ZORRO logo

GitHub logo NG-ZORRO / ng-zorro-antd

UI components lib based on Ant Design for Angular


20. Angular-Cesium

A project using Cesium and Angular components to create mapping applications. A world map, a name, the Angular logo - that's all it takes 🗺!

Angular-Cesium logo

GitHub logo articodeltd / angular-cesium

JavaScript library for creating map based web apps using Cesium and Angular


21. Angular Progressbar

A nanoscopic progress bar that tries to convince users that something is happening. Angular logo loading in progress ⏳!

Angular Progressbar logo

GitHub logo MurhafSousli / ngx-progressbar

Angular progress bar ☄


22. ngx-auth-firebaseui

Angular UI component for firebase authentication. Put something inside the famous Angular outline and it will be recognized as Angular project 🔥!

ngx-auth-firebaseui logo

GitHub logo AnthonyNahas / ngx-auth-firebaseui

Angular Material UI component for firebase authentication


Wrap it up

I hope I was able to show some of the creativity in Open Source and you are now motivated to fork something or create your own. This list could be continued forever. There are countless great OS projects out there.

A big big thanks again for everyone who contributes to OS - doesn't matter how much or how little! It's so good to have you.

If you want to feature a great OS project or one of your own, feel free to do so in the comments.


Published: 19th February 2020

Posted on by:

devmount profile

Andreas

@devmount

creator. developer. consultant. freelancer. javascript. php. python. css. husband. dad². guitarero. climber. retro gamer.

Discussion

markdown guide
 

Might want to replace AngularJS with Angular.IO. AngularJs is "dead".

 

Ahh thanks so much for this feedback - I thought I already updated this 😇 Now it should be the correct logo 😅

 

Awesome collection! Thanks for pointing out what we are able to do if we work together, not against each other...

 
 
 

Thanks for amazing article Andreas. Open Source is really awesome thing, and of course it will grow up and up in future. I think developers can write articles and posts in social networks like this, Twitter and anothers about their ideas or (what would be better) ready project. Maybe community would be interest in your project and your idea will change future?

 

My pleasure! 😊

Maybe community would be interest in your project and your idea will change future?

Very good question. You'll never find out until you're brave enough to try and release something and you're not afraid of failing a lot of times. Open Source is a great way to gain experience in both: failing and succeeding!

 

Great list! Have you seen monetizeyourcode.com yet? It's a running list of funding options for OS devs.

 

Thank you for sharing this resource! Have you already used this list? What is your experience?

 

wow great list, thanks for compiling this together!

 
 

I am happy that my project ngx-auth-firebaseui is listed here.

Great work Andreas.

Here are some more OS projects that I did recently:
github.com/angular-material-extens...