I have been working as a frontend developer for a couple of months now and have realized that alot of design components repeat itself between projects, an example is boxes. For almost every project I have done this far there has been boxes (productboxes, cta:s, staff etc.) and every time I spend an hour or two to build them from scratch. I could of course look through my old projects to se where I used a similar box before but looking through all the old repos for the best fit takes almost as long time as building from scratch. So my question is there is an application for storing snippets kind of like codepen / jsfiddle but with focus on sorting and tagging up the snippets. For example if I needed boxes I could go to boxes and all boxes I have added could be scrolled through on one page. I feel that both me and the designer could have use of this, especially in projects that have a tight schedule.
I have tried to Google it but I haven't been able the find the right keyword.
You may have a look at Fractal which is exactly what you need. With Fractal you can build your own HTML component library to re-use your components with a nice interface. It's worth to try it out.
Related
I would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?
What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.
I'm a student wanting to make a web app/web site as a project, with an interactive three.js animation incorporated into it.
I've found enough information on learning three.js and useful examples which are either animations or games. But I can't find either an example or tutorial at a beginners level, that uses a three.js animation as part of something like a product selection website.
For example, a car website. Customers can select different wheels on the car, different accessories and color. Once picked they can play the animation of the car moving. I will stress that I'm looking for something basic, so that I can go in and understand the code without too much expert knowledge. Or a beginners tutorial.
Any kind of three.js example or tutorial on a user choices (from a panel that I could build/customize) changing the animation would be welcome.
I believe this information would be useful to many three.js beginners as the issue is raised in the O'Reilly book by Tony Parisi. To solve this he has created a framework built on three.js called Vizi https://github.com/tparisi/Vizi. However it's very new (March 2014) and in beta.
Thanks for any help; first time poster.
Well the scenario with the car you're describing is not simple at all. I coded a similar scenario for wedding rings, and a friend of mine is working on something like this for watches. These are rather large projects because what you want is customizeable 3D objects. They first need to be designed and coded.
In your car case you'd maybe have to create all the wheels in Blender, create the car, stitch them together in THREE.js, have a GUI where you can swap out wheels and where the selected wheel gets exchanged on the car. And there's a lot more to it...
If you're looking for something like JqueryUI for 3D then I'm afraid that doesn't exist (yet?) since 3D is usually a tad more complicated...
I haven't hear of Vizi yet but maybe it helps your case, who knows. Other than that there's software where you can embed a model or scene into your website, but without the fancy wheel exchanging stuff. http://clara.io/ and http://verold.com/ are some, maybe have a look if it's something you can work with.
Let me start by saying I have read plenty of questions and blog posts relating to the use of combinations of backbone/jQuery mobile and comparisons of backbone/Sencha, and have actually had my head in this space for some time but still haven't found quite what I'm looking for.
I'm very familiar with Sencha and have used it for wrapped (phonegap etc.) apps in the past, and I really like it. However for a smaller code base for web projects and more control over browser compatibility and various other reasons it's not quite appropriate for certain tasks.
When I start trying to engineer mobile (but also desktop and tablet) backbone webapps from scratch I find I miss three key things
General mobile 'init', filling the screen etc. (although this is the easiest to replicate)
Tabbed, iOS-style, navigation (of course I can roll my own, but it seems silly)
Scrolling - both scrolling a piece of content, but especially the carousel and how the carousel is linked to the tabbed interface
I'm not massively bothered about mimicking each device's native OS style throughout the app, and in fact would prefer to (whilst following some sensible conventions) make them look a bit different.
Ember has flame and I've used that before, that's kind of the thing I'm looking for.
I know I can build up a toolkit of jQuery mobile, custom script, jQ plugins/iSroll, CSS libraries, backbone UI etc. and do like the idea of compiling my own 'stack' but for some reason it just doesn't feel right.
So, to bring this back around to more of an actual question. I guess I'm looking for ideally a single project that isn't specifically linked to a library - and in theory could run on it's own on a statically coded page if needs be (even though that wouldn't be the case for me now). Or perhaps some words from others who have been on a similar journey and perhaps ended up on the mix of libraries I mentioned earlier with why they decided this was the best solution.
I'm not looking to do anything too crazy, say something a bit like the old sencha oreilly example but using some carousels, and I'd cover the multiple devices and browsers with a mix of Responsive CSS and a bit of JS.
I'm going to continue looking at this myself too and report back if I find anything interesting
Cheers
EDIT
While looking into this, I realised its only really the carousel and scrolling that I really wanted from Sencha. I noticed that Cubiq has a nice slideview component that handles the carousel very neatly and with a small footprint. I found a stackoverflow answer about using this with the original iscroll for vertical scrolling. See my answer below for successfully using the two together
How to use iScroll4 with SwipeView?
This would need some tweaking to work appropriately on desktop. and I'd like to control it from a tabbed UI too. Anyway, I'm not near answering my own question but given this has had a couple of upvotes I'd post some of my thinking.
Quick edit
You can attach events for tabs to the slideview https://dl.dropbox.com/u/81328343/scroll/1.html but at the moment, it only animates for next/prev and not direct page (tab) access
Webix
Very big library of components.
I've used Twitter Boostrap with Backbone...
http://twitter.github.com/bootstrap/
I understand that creating a WYSIWYG/Rich Text Editor is an absurd thing to do given the many different, annoying things that are required to achieve cross-browser support. The project I'm currently working on, however, requires a very very simple WYSIWYG editor (three options, link, bold and italics).
My question is then, am I going to spend as much time customizing and paring down TinyMCE to fit my requirements or is the task of creating my own a fairly simple one given the fact there's only three options (and nothing like text resize or undo/redo)?
Also, is the general consensus still iFrame and designMode or are we significantly far along the HTML5 train that I can go with contentEditable?
You have to ask yourself one question, do you feel lucky^H^H^H^H^H^H^H^H do you want to maintain said WYSIWYG editor?
Two years ago I thought this would be a good idea. I took the editor used here on stackoverflow. Threw away all the UI code and re-wrote the whole thing from the ground up, only saving the markdown parsing piece. And let me tell you, markdown is a whole lot simpler than HTML/WYSIWYG. The final javascript, UI only, is 1600+ lines of code and took about 2 weeks to write the first pass of full functionality.
I implemented it into the web app I was working on a the time and learned something real quick: I was now spending 50% of my time maintaining an editor and the other 50% of my time delivering code for the actual domain-specific part of the web app I was working on. That basically means I was spending half of my time not delivering anything that really contributed to the bottom line of the web app.
So how about you -- Is this WYSIWYG editor such a core, critical part of your app so much so that you'd be willing to now spend half of your time supporting it -OR- is the other bits that your web app is doing far exceed the importance of this one piece of your UI so much so that you could "farm it out" to TinyMCE?
Also, there are a lot more options out there besides TinyMCE which you could use as a starting point.
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.