12 ms·
Brick – UI Components for Modern Web Apps
- jwilliams 13y agoInteresting, although I think the "beta" is quite literal. Seems to lack a bit of polish. The one I was most interested in was the Date Picker, but locks up Chrome (28) and Safari (6) on my machine. http://mozilla.github.io/brick/component/datepicker/demo/index.html http://mozilla.github.io/brick/component/datepicker/demo/ind...
- moondowner 13y agoLocks FF Nightly too.
- epmatsw 13y agoReally? I'm running the UX nightly and it seems fine
- aroch 13y agoClearly I need to restart my browser more often....But it works fine in both 25.0a1 (2013-07-26) and the latest Nightly under OSX 10.8 and 10.9
- csuwldcat 13y agoGiven that the errors and ability to reproduce are so erratic (to the extent that people with the very same browser versions on the same platform are seeing different behavior), I have a feeling the issue may be something like this: https://github.com/eternicode/bootstrap-datepicker/issues/95#issuecomment-6292057 https://github.com/eternicode/bootstrap-datepicker/issues/95...
- ciupicri 13y agoIt slowed firefox-23.0-1.fc19.x86_64 so much, that I thought it froze too.
- cateye 13y agoI can confirm this on OSX - Chrome 28.
- csuwldcat 13y agoI'm also running Chrome 28 (Version 28.0.1500.95) on Windows, but everything is running fine. I'm wondering if Chrome itself is locking up, because the calendar demo is has only one demo of the polyfill picker, the rest are the native calendar that it uses when it detects it is available.
- csuwldcat 13y agoThe issue might be locality dependent, we have several people where who are running the exact same version and platform that cannot reproduce - could be an issue like this: https://github.com/eternicode/bootstrap-datepicker/issues/95#issuecomment-6292057 https://github.com/eternicode/bootstrap-datepicker/issues/95...
- ssharp 13y agoAnother thing about the date picker that was at least happening on my desktop: when it expands, it expands well beyond the bounds of the mobile phone container they're using in their example: http://i.imgur.com/oOQFBs4.png http://i.imgur.com/oOQFBs4.png
- potch 13y agoThat likely won't happen on your real phone :) Thanks though! I'll file an issue for that if one hasn't already been.
- emehrkay 13y agoSeems fine on an older webkit nightly (the newest one, on another machine, crashes after five mins)
- NKCSS 13y agoYup, has been a while since I've had to fire up IE to view something that doesn't work in chrome :P While the page does load, it has a long running script that dies :P
- csuwldcat 13y agoGiven that the errors and ability to reproduce are so erratic (to the extent that people with the very same browser versions on the same platform are seeing different behavior), I have a feeling the issue may be something like this: https://github.com/eternicode/bootstrap-datepicker/issues/95#issuecomment-6292057 https://github.com/eternicode/bootstrap-datepicker/issues/95...
- nogridbag 13y agoI'm not having the freezing issue with Chrome (28). But I think there're some major usability issues. I cannot figure out how to input a date. If I input "8" then "16" it's current value is 08/16/yyyy with the "yyyy" part selected. If I continue to input "2" for the year part it changes to 1902. Inputting "20" will reset the date picker back to mm/dd/yyyy.
- csuwldcat 13y agoI believe you are describing the native datepicker, I am seeing the same weirdness. Be advised, the calendar polyfilled calendar is only active when a native implementation is not detected, or you force it to be used. This may be a bug in Chrome itself.
- nogridbag 13y agoYes you're correct. It's neat that it uses the native datepicker if available, but one area of concern is they use different date input formats. Native forces mm/dd/yyyy while the polyfill suggests yyyy-mm-dd (though it accepts the former format as well).
- potch 13y agoIf you wouldn't mind, could you file this (and other problems you run into) as issues? https://github.com/mozilla/brick/issues https://github.com/mozilla/brick/issues
- potch 13y agoHi! I work on Brick. Yes, there are still rough edges on these components, and we're putting them out there in the hopes of getting feedback and bug reports- a traditional beta.
- varunkumar 13y agoHi, Is there any documentation to read about the implementation of these components? Does it use x-tags??
- csuwldcat 13y agoYes, Brick is a set of components developed with X-Tag (the web components sugar library)
- jwilliams 13y agoCool. I see the date picker has been fixed - thanks muchly & thanks for putting this out there. In terms of feedback :) I gave it a shot. The only one that had a native date picker component (on my setup) was Chrome. The polyfill version didn't seem fully operational (just an overflow list of the same date?). The Chrome native suffers from the same UX snafu that so many Date Pickers do - it's fine for relative dates, but terrible for absolute ones. If you want to schedule an event in a week it's great. Or of you want to search for flights. However, if you want to enter a Date of Birth, it's terrible. You have to scroll through hundreds of months to get to the year you want. So maybe you fall back to typing? In the native picker in Chrome, you can muddle through the day/month piece, but you can't type a straight year. e.g. start by typing "19" for "1975" and it'll match "1909". This also makes it impossible to enter a date in the 2000's! You do get a "spinner" that might let you set the year, but the buttons are so small I think it defies practical usability. Bah! Interestingly the iOS version does not suffer from this gripe as has a slot-machine three drum date selector. It does default to today, but it's pretty easy to move +/-50 years in either direction. Sorry, that was a genuine rant. I know this is not intrinsic to Brick, but for me a universal Date Picker is #1 bugbear that I'd like it to solve. (* The Chrome one also defaulted to the wrong timezone. Clicking "today" selected the wrong date.)
- bsimpson 13y agoWorks fine in ChromeOS 28.0.1500.95
- nilsbunger 13y agoSounds like the "brick" is quite literal too in this case! :)
- SchizoDuckie 13y agoThe first example (flip widget) already does exactly nothing on Android.
- unwind 13y agoCounterpoint: it works perfectly on my Android device (using the standard awesomely-named "Internet" browser).
- robertnn 13y agoWorks for me in chrome as well.
- PommeDeTerre 13y agoIt working for you doesn't change the fact that it's not working for somebody else. It's still broken in at least that one case, and that's enough to raise concern among those of us who want to avoid such failures.
- RossM 13y agoOddly enough in Chrome Stable the front face is not visible. Combined with the browser-crashing calendar demo it's got some way to go.
- cliveowen 13y agoThe date picker actually froze Chrome and slowed everything to a crawl. Way to go Mozilla.
- epmatsw 13y agoInteresting. In Chrome Canary, the polyfilled text input is working fine, but the native date input is freezing.
- OlavHN 13y agoThese are UI elements built on top of (a shim for) the coming standard Web Components. For another Web Components shim check out polymer-project.org along with a small, opinionated framework leveraging Web Components. Especially look at the awesome Sandbox application allowing you to compose web components :)
- phpnode 13y agoyeesh, I respect Mozilla for their true open-source-everything-all-the-time philosophy but this is an example where I think it backfires - it's too early! Even if these really are awesome components it's really hard to see past the lack of polish. People are fickle and you only get one chance to make a first impression, it's important that these things look good
- daleharvey 13y agoI dont believe it backfires. People are fickle, you get lots of chances to make a first impression. I think the key is clarity in your communication, doing a lot of polish on top of unstable software and advertising it as stable causes people to waste time using it, advertising as beta / for early adopters lets the early adopters pick it up and the people who just want it to 'just work' can wait. If you lose a few people who dont understand the benefits still far outweight the negatives. This is mostly just a disclaimer for people who are waiting to open source their software until 'its ready', its never ready, do it now.
- davexunit 13y agoIt's never too early. Develop in the open. Make an official release when it's ready. The site makes it perfectly clear that it's in a Beta state.
- potch 13y agoWe were torn whether to call the current state of things alpha or beta, but yes, these are not ready for prime time. Where we and some other orgs disagree is that things should be kept secret until they're 'ready', when outside contributions could help you get them ready!
- rafaelferreira 13y agoAt first glance, the intent seems quite similar to Google's Polymer project. Hopefully they will interoperate.
- casual_slacker 13y agoLooks like these are built on Polymer. (http://www.polymer-project.org/ http://www.polymer-project.org/).
- andybak 13y agoYep. The web components aspect is the most interesting aspect of this. It would have been useful to put that in the post title (until a mod reverts it).
- potch 13y agoWe're actually not using the Polymer Web Components shim- it attempts to simulate Shadow DOM by overriding DOM Methods(!), which didn't seem necessary.
- csuwldcat 13y agoUnderlying Polymer's opinionated framework, there is a set of polyfills for the emerging Web Components standards - both Mozilla's X-Tag library and Polymer use these polyfills as the basis of their offerings.
- Kiro 13y agoDoesn't work on my phone (Samsung Galaxy S3, Android Stock Browser).
- riffraff 13y agoNeither in mine ( opera mini in an iPhone 3). then again, most new things do not :(
- aswanson 13y agoDoesnt render well on Opera mobile.
- advicethrowaway 13y agoDoes anything?
- aswanson 13y agotouche.
- bpatrianakos 13y agoThis is cool and certainly useful but I have concerns. Forgetting for a moment that this is a shim and imagining that all browsers support this natively, isn't this sort of thing outside the intended purpose of html. Html should describe content not styling and this sort of thing seems ripe for abuse. I thought XML was the markup language for describing custom data. Adding the ability to create your own DOM elements for the purpose of using them as hooks for interactivity and styling seems like something that should be avoided in HTML. Am I being a too much of a purist or overlooking something here?
- WayneDB 13y agoI'd rather say <x-calendar/> than <div><div><div></div></div></div>.
- deleted 13y ago[deleted]
- k3n 13y agoIsn't that pretty much the M.O. of Angular? Not that it makes it right or wrong, but this just seems like a different take on the same (or similar) concepts.
- jnbiche 13y agoThe web components spec is precisely what AngularJS has been anticipating since Angular's inception. I believe the idea was (and still may be) to integrate web components once they are officially adopted by the major browsers.
- pennyfx1001 13y agoWeb Components is an active W3 spec. http://www.w3.org/TR/2013/WD-components-intro-20130606/ http://www.w3.org/TR/2013/WD-components-intro-20130606/ All browsers are going to support Web Components eventually and it is going to greatly expand what we thought HTML should or shouldn't do. I think Chrome Chrome Canary has an implementation behind a flag and FF is actively working on it as well.
- csuwldcat 13y agoThe folks working on the components are going to be incorporating all this feedback and reporting going forward. Everyone is encouraged to file bugs with the repo here: https://github.com/mozilla/brick/issues https://github.com/mozilla/brick/issues Just an FYI - Mozilla will be employing this highly technical problem resolution strategy to ensure a high level of quality prior to official release: http://www.youtube.com/watch?v=yo3uxqwTxk0 http://www.youtube.com/watch?v=yo3uxqwTxk0
- dlsym 13y agoThe Datepicker Demo bricked my Chrome :-/
- ebbv 13y agoWhile I understand the desire for custom HTML elements I'm also certain they are going to result in monstrosities. It's not the tool's fault, in the end. But it is opening up a basket of horrors.
- kclay 13y agoWhile this is great it doesn't work in Android Webview or "Browser", in chrome its just fine.
- detay 13y agocalendar crashes on Chrome 28.0.1500.95
- thousande 13y agoAh! It continues Web Components are the most exciting thing on the Web at the moment. I can not wait until this is fully supported in the browser. There is a lot of great JS frameworks out there that projects DOM etc., but I always fall back to markup as the best way to build a browser based app
- nrivadeneira 13y agoFirst thing I thought of when I read the name was Designmodo's UI kit "The Bricks" - http://designmodo.com/the-bricks-addons/ http://designmodo.com/the-bricks-addons/ When it comes to search, their kit might eclipse yours...at least for the time being.
- ldoubleuz 13y agoFor those of you reporting crashes in calendar/datepicker, can you please indicate what region you are in (UK, etc)? The issue is most likely caused by non-American date formats, and we are working on a fix.
- nilsbunger 13y agoThese are a big step forward compared to today's tangle of plugins! Much smoother and nicer to code. On IE10 this library has no animations. Is it possible to polyfill your way to decent support with animations at least on IE10? (I hate IE but a lot of our customers use it)
- itry 13y agoCalendar looks broken in FF and Chrome here. All I see is: 21 21 21 21 21 21 21 21 21 21 21 According to Browsershots it looks like this on many browsers: http://browsershots.org/http://mozilla.github.io/brick/component/calendar/demo/index.html http://browsershots.org/http://mozilla.github.io/brick/compo... Same with the datepicker. Some other stuff also looks broken. I would much prefer one piece of javascript per component. So if I liked one, I could use it and improve it. Im not so much inclined to use a library of tons of stuff I dont use.
- utopkara 13y agoExcellent! Didn't know about web components. Are there any big blockers that would prevent libraries like jQuery Mobile moving into this?
- varunkumar 13y agoWhat are the building blocks of Brick?? Does it use X-Tags?
- varunkumar 13y agoFrom the code, I could see that they are built on top of X-Tags
- rubyn00bie 13y agoI think it's fucking awesome and it works like a boss in FF 24 (beta) on OS X. I'm very excited about this project only because standard UI elements are so irritating to make (after having done it hundreds of times) and the alternative libraries (in my opinion) all do too much and too little at the same time. For everyone complaining about Chrome, I would like to say this is "beta" and "ahahahahaha." Not to be malicious though! I just have a really shit experience on the web with a lot developers only targeting Chrome/Webkit. Like ScalaTour for instance-- a wretched experience if you're /not/ using Chrome (read unusable). It's nice to see it go the other way for once! ;-)
- drivebyacct2 13y agoSo, this is Mozilla's equivalent of Polymer. Fun!
- potch 13y agoWe've pushed a stopgap fix to the calendar code to stop it from hanging while we investigate/repro the issue.
- pfisch 13y agoSo does this work on ios or not?
- drudru11 13y agoWith this and Polymer, I think the whole idea of software components might actually happen. I cannot wait for this to happen. Having this stuff would be great! Thanks to the people behind HTML5 for kicking off the innovation. Thanks to the team that put this together at Mozilla. I went to the demo page and things just worked.
- madoublet 13y agoUnless I am missing it, I think the killer feature for a library like this would be baked-in gesture support.
- deleted 13y ago[deleted]