meteor-famous-views
meteor-famous-views copied to clipboard
gadicc
Plugins
Famo.us community has created some nice components that could be integrated with Meteor delivering high reusability. We could set up plugins to ease their integration and create a page on the famous-views site for inventory and demo.
Plugins would be named with fview-BLABLABLA.
From @IjzerenHein
- https://github.com/IjzerenHein/famous-autosizetextarea
- ~~https://github.com/IjzerenHein/famous-boxlayout~~ (@oorabona, 29nov14)
- ~~https://github.com/IjzerenHein/famous-bkimagesurface~~ (@PEM--, 13nov14)
- https://github.com/IjzerenHein/famous-flex-tablelayout
- ~~https://github.com/IjzerenHein/famous-kenburnscontainer~~ (@gadicc, 13nov14)
- ~~https://github.com/IjzerenHein/famous-lagometer~~ (@gadicc, 12nov14)
- https://github.com/IjzerenHein/famous-listview
- https://github.com/IjzerenHein/famous-map
On Codepen.io:
- ~~Flexgrid: http://codepen.io/befamous/pen/IihwL?editors=001~~ (@PEM, 25nov14)
From @naman34
- https://github.com/naman34/famousry
From @JonnyBGod
- ~~https://github.com/JonnyBGod/famous-infinitescroll~~ (@Wanape, 23nov14)
Other fine ressources from Famousco.de:
- A Property modifier (allows to animate property not exposed by Famo.us modifier, use it with caution): http://famousco.de/2014/07/transition-button-ripple-effect/
- A 4 direction SwipeSync: http://famousco.de/2014/08/swipesync-famo-us/
- ~~A simple loader : http://famousco.de/2014/07/animated-dots-icon/~~ (@PEM--, 14nov14)
- ~~An animated hamburger menu: http://famousco.de/2014/07/material-designish-button-animation/~~ (@PEM--, 13nov14)
- Scrollbars: http://famousco.de/2014/06/192/ From @gadicc:
- A progress bar and a spinner indicating loading progress for iron:router.
From @PEM--:
- ~~A device plugin: Choose your device (iPhone, iPad or MacBook) and put your surfaces within (@PEM--, 16nov14, 2pts)~~.
- ~~fview-slidedeck: An helper package to create slides.~~ (@PEM--, 15nov14, collaboration with @gadicc)
From @mcbain :
- ~~#Animate plugin~~ (@mcbain, 19nov14))
Score:
- @PEM-- 7
- @gadicc 2
- @mcbain 1
- @oorabona 1
- @Wenape 1
Haha did you write this after reading my email or is it by chance? :) Released https://atmospherejs.com/gadicohen/fview-lagometer this morning :>
Do you think fviews- is better than fview- ?
But yes, I agree 100% and should look into all of this. fview-lagometer can be an example, my pattern is to:
1.Link original code in as a git submodule 2. Wrap around define/require etc. 3. Make sure it works with both mjn:famous and raix:famono. 4. Plugs in nicely to famous-views, loads without errors, etc. 5. Some basic customization.
I guess we could register a proper API for plugins but the current code worked well in this case.
So, we'll each do one package every day until we've done all of them? :)
Actually, yesterday, I was registering nice component from @IjzerenHein (famous-bkimage). Very useful. I was saying to myself that I would certainly reuse it on other projects. Today, I've seen that you have integrated famous-lagometter. Another nice components. Sounds like a pattern to me :smile: And I'm pretty sure that famous-views users will be relieved if we show them that integrating components from others is dead simple.
There was just one feasability question that I have and you have answered it in your step 1 (using a git submodule).
One package every day... Pfeww, I can only work on this at night. I will do my best. This evening: famous-bkimage.
I've chat with @IjzerenHein and he is OK.
Pouaf... It's me. I didn't remember that I was registering it. This reminds me that may be we could add all widgets like fview plugins. That would be nice :+1:
Yeah! First package is published: https://atmospherejs.com/pierreeric/fview-bksurfaceimage
Well... huh... not that good. I need to add some docs, add some other properties, prepare some assets and create a page on famous-view demo site.
Could you set up a menu for the plugins?
Pretty cool. Please allow attributes changes for 'content' and the surface default props e.g. 'size', 'opacity' etc...
Yeah, that's the elephant in the room that I've kind of been ignoring... if using raix:famono, how best to ensure only relevant source is sent to the client. The best thing is for famous-views to only have raix:famono include our reference to say, famous.views.Scrollview, if the dev uses a {{#Scrollview}}. That's not impossible, but a lot of work, and not a priority for now unfortunately. One day :)
Relating back to core famo.us Views, I'd prefer not to have a separate package for each one. Hopefully in the long term we can solve the above problem, but for now, I think "ease of use" is better, and I think developers will have a more positive experience if they can just start using all the core Famo.us stuff as is. (I guess with that strategy, GridLayout really should be registered too).
Anyways, I've added the plugins page to the site (under "More" for now) with https://github.com/gadicc/meteor-famous-views/commit/545a1474892296b80a1bb372c4f4206d2e28acc7. Crossed off the ones we've done from the list at the top of this issue, and, well, even if we can't do one a day, we can at least keep score :) See bottom of that 1st post, @mcbain, you're falling behind :)
Magic! 2 plugins in one day :sunglasses:
For the moment, WPO is quite good. I agree that it's not a priority. I've tested my little playground on my very limited mobile (an old Android midp single core). It's just amazing how it behaves smoothly while loading pretty fast.
For the plugins, if I may, I was willing to put some basic examples of integrations. Live demonstration within the famous-views pages. I think it would even be better than API documentation for each plugin. Just like the Views > GridLayout, for instance. Some plugins are really worth the effort. The map or the Ken Burns effect are just amazing piece to see. And when you know that using them cost you only one CLI command and one line of Jade if you use famous-views, you can't use anything else anymore.
You may :) Was upset there was no picture I could include for that, but a full demo is great and actually exactly what we should be doing!
Unfortunately how I'm processing the templates atm isn't so great for adding in additional surfaces; the main "desc" part is markdown and HTML text is supported, but because it's all processed as text, it won't work. Will whip something up later today.
Ok, did something quick in https://github.com/gadicc/meteor-famous-views/commit/72a547e996ca54e3ec043e38d2818af55f2dff6b. Working a bit weird maybe because of how we're rendering the template. Seems to be ok though if you manually specify the size (the context seems to think it's 0x0). When you have time to play let me know if it works or for you.
Weird, I got this in the demo-famono:
fs.js:689:18: ENOENT, no such file or directory '/Users/PEM/Projects/meteor-famous-views/demo-famono/server' (compiling lib/smart.require)
Done for the animated icon. I'm not that happy with it. It's not reponsive and tricky to use. Well, that's a starter. I guess I will have to PR @IjzerenHein who is just totalizing a full 100% of our plugins. He is amazing.
I've added live examples on my two plugins. It works great. Check out the colors of the hamburger icon: I've reused the ones of a famous brand which delivers fast food :wink:
It's committed and deployed. Cheers :wine_glass:
Weird, glad it's working now.
@PEM-- , that's great work! Page looks awesome now, especially illustrating all the different sizing strategies so clearly!
From my side, I'll admit I squeezed through the kenburns plugin because I knew you were going to have the hamburger out yesterday too :> It's actually not working so well and I'm looking into it.
Anyways, this is fun :) Thanks for your contribution in expanding this project timeously.
@gadicc, @PEM sorry, i'm very busy these days, so i cannot help you with the the plugins. hope in 1-2 weeks my current project is finished.
And a simple loader. There is room for progress in this one also. It uses multiples Transitional and the animation is set by the Engine.prerender. This consumes too much CPU. Anyway, it is useable and can produce a nice effect at load time while waiting for ressources.
Ah cool haha. Nice, you're in the lead! Might be a while until I can catch up, had an idea for something else cool. And I guess eventually we should also do a progress meter that integrates with iron-router.
Hop, the fview-slidedeck plugin is published with a nice set of video examples.
For the enhancement on the ContainerSurface (setting the perspective in the Blade or Jade template), it's done. I've also adapted the Flipper example so that it takes advantage of it. It's contained in the 0.1.26 but it's unpublished yet (no right to publish on Atmosphere). Therefore, I haven't published it yet on the main example site.
I was thinking of creating an device plugin. An iPhone, for instance. This would be quite useful for demonstrating the RWD features on our landing page (and for any one who uses famous-views for their site). Basically, it is a customized ContainerSurface within an SVG. I could bring multiple SVG template as devices and set up properly the aspect ratio.
Omg, yes!!!! Been wanting to do this for ages (for a single phone and not as a plugin), and never got round to it. What you describe will be properly awesome!!
I also wonder if in the long term, we could have a page which shows all different devices simultaneously, and syncs events between them. Anyway, baby steps :)
Also beyond my short answer while rushing out yesterday, the videos you added to the plugin page are great! and reactive perspective arg to containersurface very welcome!