How do you write your layout for an Angular5 + MD2 app? - angular-material

So the Material Design 2 components are out there, waiting to be used in your app but my question is how would you structure your layout in which they rest?
Do you use https://github.com/angular/flex-layout?
Write the layout manually?
Using CSS Grid, Flexbox or both?
This is for a brand new web app, and I prefer writing it using modern technologies that are here to last (as much as this is possible with Web technologies...).

You should use Angular's Flex Layout. It's also specified in the docs for Angular Material:
Layout -> See angular/flex-layout

Related

How to use ZenPen in a web site as rich text editor?

I am developing a new web site and i was looking for a rich text editor which will be help users to write heavy texts easily. Then i discovered amazing app ZenPen.
But as i undestood it is designed as a standalone app instead of using in a web site.
There is no html form support or form elements even. So i am trying to get texts from <header> or <article> tags via jQuery. But i wonder is there another way to achieve this.
If i couldn't achieve this my other alternatives are grande.js or medium.js
Zenpen is not intended to be used as library but standalone product (I wish it could serve both purposes).
ZenPen is a stand alone product, and thats how I'd like to maintain it.
tholman (Zenpen's maintainer)
Source https://github.com/tholman/zenpen/issues/102

Integrate Backbone Boilerplate with jQuery Mobile and place layout structure

I just started with Backbone.js, I've read the documentation and also the Backbone Fundamentals book before doing anything. I want to create a PhoneGap application with the help of Backbone.js and I'm a little bit lost on where to place some logic in Backbone.js or how integrate jQuery Mobile.
I need jQuery Mobile because I want to build an app with this exact structure, 2 panels that you can open with a swipe movement.
To integrate jQuery Mobile, the only thing that I've to do to BBB is to add a new Shim (and libs) in the config file? Is that the correct workflow? Or should I touch something in vendor/?
Once I have the jQuery Mobile integrated to Backbone Boilerplate, I want to just reproduce the demo. I know how I will place this code in a old fashioned website, how I would place my files, etc. But when it comes to Backbone... I'm totally lost. Where is the place to put the JavaScript code that will start the functionality of the panels?
Thanks in advance!
Usually, using jQueryMobile with Backbone gives headaches. Luckily I found a solution that simplifies the problem. It's a library called Jackbone. The author explained it better than I could do:
Summary
Jackbone is a utility library that aims to structure the development
of rich HTML5 applications using JQuery Mobile, by extending the
Backbone framework. It heavily relies on Backbone, offering
specialized classes for your views and router. Additionaly, it defines
a controller interface, provide a view manager that handles life and
death of the Views and Controllers of your application.
https://github.com/Fovea/jackbone

How to properly configure and manage mobile site in Rails?

This post has been 'somewhat' addressed (see links at bottom of post) but not to it's full extent.
I am working on building a mobile site in Rails 2.3 (I know, I'm going to migrate to Rails 3 soon). Either way, as I continue developing this mobile site (and I am using Mobile Fu - works great), I'd like to understand best practices around configuring and managing the mobile site:
Where should I redirect to the mobile domain (in application controller)? What is the best logic for doing this?
Should I build the .mobile.erb files in the same folder as the .html.erb files? Or in a separate mobile folder?
What kind of routes/controller/etc logic do I need for my mobile site (if I decide to not embed the mobile rendering inside my current application structure, but instead have a separate controller and mobile view folder)?
I appreciate it.
Other links:
Web and Mobile views best practices same controller or namespace?
http://www.arctickiwi.com/blog/mobile-enable-your-ruby-on-rails-site-for-small-screens
Rather than answer your question directly, I am going to suggest that best practices have moved on somewhat.
Concepts like Mobile First, Adaptive Design, Responsive Design, and Progressive Enhancement are replacing the split site approach as best-practice.
These concepts revolve around building out your site for mobile first (so you can work out what the most important things are) and then extending the design for screens that are larger.
It removes the need to determine if it is a 'mobile' accessing the site and instead relies on various techniques (adapt.js or CSS media queries) to target different layouts to the variou screen sizes. It also means you do not have to maintain multiple views and routing - you have one view and change the CSS.
When you move to Rails 3.1 (with the pipeline) this allows the creation of CSS (and JS) manifests, and you can (potentially) have one manifest for each screen size.
There are issues with the above approach (just as there are with split sites), but if you Google the key terms above you'll find tons of advice. Best of luck either way!
Edit: Here are some links I found useful.
http://www.lukew.com/ff/entry.asp?933
http://www.netmagazine.com/features/mobile-first
http://www.alistapart.com/articles/responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/
There are some that think that this is bad though:
http://nefariousdesigns.co.uk/archive/2011/05/sniff-my-browser-the-modernizr-inadequacy/

A fast way to build a nice UI for a grails app?

I'm starting a fairly complex grails app but am a bit slow hand-coding nice user interface pages directly in CSS/HTML. Several people have recommended IntelliJ for the grails app development, and I plan to use mostly grails scaffolding for the admin portion of the site.
Can you recommend an approach or tools for building a nice UI fairly fast?
Thanks
P.S. Eventually I plan to build "skinnier" mobile version as well.
One approach might be to continue to use the grails sitemesh main.gsp and just concentrate on your functionality using the scaffold-ed pages as examples. Once you are ready to tackle the style aspect you can deviate from the grails main.gsp template and create your own tailored for your look and feel.
If your complexity includes a fairly custom UI, I don't think your going to get a free lunch. You'll have to break down and code the UI.
I'm currently using jQuery UI coupled with jqGrid to get some fairly sophisticated grid / tree behavior in my UI with not too much html coding. I'm also using the jQuery UI Layout Plugin to manage pane layout and make my app look/feel more like an app rather than a page. Grails plays real nice with the ajax needs of jqGrid.

Is it possible to integrate Vaadin with Rails??? If so, how?

As i see Vaadin is a Java based UI framework. But it has some really nice set of widgets and a very good layout engine. Is it possible to integrate Rails and Vaadin? JSON perhaps??
It sounds like that'd take a lot of work creating an interface between them which will likely only slow things down. By the time you had everything working the way you wanted you could've finished what you wanted in Rails or Vaadin separately.
If you did make an interface, JSON is the way to go. Lightweight and almost everything supports it with little overhead.
is there any alternative to javascript based frameworks?? other than the usual ones (jquery, prototype, sproutcore
Just pointing out, that all rich UI frameworks that run in the browser are JavaScript in the end (not including any plugins like Flash), even Vaadin, which is built on top of GWT on the client side.
I guess you'll have to consider integrating with the Rails backend either on the server side (e.g. with a Vaadin Java servlet) or on the client side with a custom data exchange over HTTP (using JSON) and using some client side framework like GWT, SproutCore, Cappuccino etc.

Resources