Development of gsaw-js v0.1 - The Scipio Files #11
As some of you might have read here @utopian-io has already received about 15,000 contributions of which a little over 10,000 were accepted in the last 3 months. That's a fantastic achievement of course - congrats to Team @utopian-io ! - and even more so when you come to realize that the last month more contributions were generated than the two months before that.
However, what @elear's article, I just referenced, doesn't say, but is in fact true, is that out of those ~10,000 accepted contributions only about 6% belongs to the "Development" category. And although I did do some development work under the @utopian-io flag - ref. my UserAuthority (UA) work - I posted the "invention" articles about UA under the "blog" category here and there, and it was @stoodkev (whom I've helped in development) that offered to assist me developing UA and blogged about it here and there.
So, starting today, both in order to help @utopian-io grow in the "Development" category and to have some development fun as well, I'm starting my own contributions to the "Development" category myself! (And don't worry, for those who follow me regularly, I will also continue to post tech tutorials as well).
Introducing gsaw-js v.0.1: An "Add Water" Animation Library built on top of GSAP
The web - in general - has improved its general look-n-feel, usability and functionality a lot over the past few years. Many factors have contributed to that improvement, too many to discuss in this article. But to name some important ones, there's of course the Open Source movement in general and the Wordpress movement specifically, empowering many websites and (beginner) web developers. To make great-looking websites, as a developer, you need to learn about design, front-end development, some back-end development including the Wordpress API, content management, a bit of systems administatrion, responsive design / mobile-friendly web development: there's really a lot to cover, master and comprehend at all! And since it's about impossible - for most developers - to master it all, many use standard libraries and copy-paste some code here nad there to make things work. That's perfectly understandable, and alright even: everybody needs to make a living of course. But let's see if we can improve both the end-user and developer experience...
I've been intrigued with web animations, I think they're really cool and that they bring something new to the (web) table. One the one hand of the spectrum, there's the "Just Add Water" Animate.css library, which uses CSS3 Animations for web animations. And on the other hand, you have the GreenSock Animation Platform, GSAP, which is an extremely powerful, fast, elegantly coded, yet hard-to-use-for-many web animation environment. Now - form a technical perspective - I think HTML is designed for content and document structure, CSS is meant as a presentation layer of that content and structure, and (client-side) JavaScript is meant for DOM manipulation (to change states depending on what event happens when). And therefore I think web animations should be done with JavaScript, not CSS. However, although anybody able and willing could study and use GSAP, that requires a significant amount of JavaScript knowledge. Yet I'd like to see many more GSAP-enabled (Wordpress-powered) websites out there, so enter gsaw-js !!!
How to use gsaw-js
Well, actually I'm trying to make it as simple as possible to use gsaw-js on your own websites / templates / Wordpress Themes. You only need to know a bit of HTML and CSS, no JavaScript skills are required!
All you need to do is look up the effect you want to use, and add the corresponding effect class name to the DOM element you want to apply the effect to.
For example, in case you want to add the "Swing" effect to one or more a { display: inline-block;} hyperlink(s), simply add the gsaw-swing class name to your hyperlink like so:
<a href="" class="gsaw-swing">Some Button Text</a>
... and then, BOOM!, straight out of the box, it just works! You only need to "add some water" to the element, like I did styling it with a purple background-color, some padding, and some margin. How everything looks is simply CSS styling (= the water you add yourself).
This is what I've built thus far, for v0.1 of gsaw-js:
POW:
PS 1: currently gsaw-js has jQuery Core (and of course GSAP's TweenMax.min.js and TimelineMax.min.js) as a dependency. The GSAP dependencies will remain there, but I'm not sure what to do with the jQuery dependency. Currently it's just there as a convenient "Selector Engine" and I might either keep on using that in future gsaw-js versions or completely remove the jQuery dependency (or replace it with something like D3.js ?): let's see how the project develops.
PS 2: not all my "development articles" will be this lengthy. The coding itself takes enough time already! ;-) This was just an introductory article to announce gsaw-js.
PS 3: if you have cool animations ideas you'd like to see me add to the gsaw-js repo, just describe to me how the effect could look like, or drop me web-url you found somewhere to show me an effect just like it built with some other tool. You can share your ideas via the comments o send me a DM over at the Utopian Discord chat server.
More Open Source projects for me to contribute to
Starting today, I'm also open to help development of other Open Source repositories than just my own! So feel free to contact me, for example via a DM on the Utopian Discord chat server in case you think me helping on the development of your own repository could be interesting to you. I'm - amongst other things - a so-called "Full Stack Developer", meaning that I can code both frontend and backend applications. I code HTML, CSS, JavaScript (both frontend and backend, nodeJS), PHP, C, C++, GoLang, Python (2/3), and ShellScript. However, please keep in mind that I'm quite "picky" about which repositories I want to co-develop. I always need to see some benefit in the repository's potential that one way or the other could help achieve my own goals.
For example @stoodkev's SteemPlus Browser Extension could be interesting for me to help grow, because it improves the Steem Ecosystem User Experience (UX), which in turn improves the current Steemians' activities and helps onboard newcomer Steemians. Steemit.com itself would be another valuable project to co-develop (although I'm not sure who to contact for that...), so is https://utopian.io (both the frontend and the backend / bot code), and so is @howo's and @fredrikaa's https://steemgifts.com/. Anyway, there are thousands of interesting projects to help grow, and if YOU think I'd like to assist your own projects: you know where to find me!
Enjoy gsaw-js !!!
Posted on Utopian.io - Rewarding Open Source Contributors