I'm using react, with bootstrap, and less. I was just wondering whether it was a better practice to use <center className="text-center"> when centering text for accessibility, or if I was better off just sticking with <div className="text-center>. Or does it even make a difference?
It makes no difference for accessibility, but it's a bad idea for many other reasons, and depending on the doctype you use, might even violate WCAG SC 4.1.1.
Don't use deprecated presentational HTML tags if you can avoid it. And you can, with CSS and style attributes. <center> is completely obsolete in the 21st century.
Should I use the <center> tag?
Yes, but only if you're specifically targeting Netscape Navigator (before version 2.0).
Latest HTML3.2 references said that:
CENTER was introduced by Netscape before they added support for the HTML 3.0 DIV element. It is retained in HTML 3.2 on account of its widespread deployment.
Otherwise, no ... as it will be deprecated in 1997.
Related
When I inspect the markup rendered by react on the server, I see a lot of comments like:
<!-- /react-text --><!-- react-text: 28 --><!-- /react-text -->
How do I make react stop rendering them?
You can't. Those are needed for React to do its job as far as knowing how to remove/replace items in the DOM. This is an improvement over the previous way React did things, which was data-reactid attributes everywhere.
ReactDOMServer.renderToStaticMarkup does exactly that.
From that page:
Similar to renderToString, except this doesn't create extra DOM attributes such as data-reactid, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
If you wrap each "word" and/or space in a tag, the comments will not show up. Not ideal for large returns, but if for some reason you absolutely cannot have those comments in there it is a (not ideal) solution.
Just view the code in the web inspector, you will see the difference.
https://jsfiddle.net/69z2wepo/73674/
no comments
return (<div><span>Hello</span><span> </span><span>{this.props.name}</span></div>)
comments
return (<div>Hello {this.props.name}</div>)
I can see that this was an AngularUI discussion at one point...
I'm wondering if anyone else has implemented Angular directives that would allow me to replace traditional Bootstrap laden markup like this
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 offset2">
</div>
</div>
</div>
with easier-to-read, element focused, markup similar to this
<container-fluid>
<row>
<column span4 offset2>
</column>
</row>
</container-fluid>
Seems like it would be easy enough to implement, which makes me think that someone else has done this already (or that it's not worth it for some reason (maybe there's a performance hit?))
Has anyone done this already already?
If not, are there reasons I shouldn't implement it myself?
There are several Angular+Bootstrap projects, the prominent ones are AngularStrap and UI Bootstrap, I'm quite sure you're already aware of them. Sure, they provide custom directives, but only for the things that require this (i.e. Bootstrap JS components).
Seems like it would be easy enough to implement, which makes me think
that someone else has done this already (or that it's not worth it for
some reason (maybe there's a performance hit?))
Besides unnecessary performance overhead it would considerably diminish the value of Bootstrap as frontend framework - something that has learning curve that you already passed.
There are some developments in that direction - e.g. angular-deckgrid, yet I'm not aware of any ambitious and comprehensive (web-oriented) framework like Bootstrap or Angular Material.
There would be more sense in tailoring custom syntax for yourself. You can take a look at ui-alias (a part of ui-tools). It is rigid in its current state, but it a good example of smart approach to directives. And could be easily extended to make the mapping of classes to attributes and elements a breeze.
There are two ways in which one can make headers using Ionic framework.
<div class="bar bar-header bar-dark">
<h1 class="title">Title</h1>
</div>
And
<header-bar title="'Title'" type="bar-dark">
</header-bar>
Links in Documentation :
For first : http://ionicframework.com/docs/components/
For second : http://ionicframework.com/docs/angularjs/views/header/
What is the difference between them?
The first is native HTML elements using the predefined CSS class names.
The second is using an AngularJS directive. Basically it is a custom element that at runtime will be replaced by a template. See here for the actual AngularJS directive definition. You can see the template that replaces the original element.
Directives like this will play an interesting part of the future of the web. There is a standard on its way in Web Components that will standardize these kind of markup constructs. Besides directives in AngularJS there is another popular way of doing this style of components using Polymer.
I like a directive that conditionally puts a tag outside some content (but always prints the content), like this:
<p><strong ng-if-always-keep-inner-content="model.condition">{{model.text}}</strong>/p>
so if condition is true I get
<p><strong>yada yada</strong></p>
otherwise I get
<p>yada yada</p>
I could write it myself, but I want to know if it is possible to do with built in directives/options.
I should perhaps say this is used together with Bootstrap, which afaiu recommends using <strong> vs some class with a bold font.
I don't think there is a built in directive. You should write it.
I suggest to use a classic ng-if
<p ng-if="model.condition"><strong>{{model.text}}</strong></p>
<p ng-if="!model.condition">{{model.text}}</p>
In your specific case, you can also use ng-class and set the strong style via css.
I'm trying to work out why this doesn't work:
<a class="ng-click: loadSomeDatas();">Click here to load some datas</a>
But this does:
<a ng-click="loadSomeDatas()">Click here to load some datas</a>
Why are you using classes?
Well ng-* attributes don't play nice on some of the clients I have to support, thus rather than shimming them I'd rather just use good ol' safe classes.
This looks like a documentation error. According to the source code, it can only be used as an attribute. The link function does not use restrict so the default is "attribute only".
Can you try using "data-ng-click"? Angular will still work with data- appended before it's attribute names and this should be valid syntax in older browsers.
<a data-ng-click="loadSomeDatas()" href="#">Click here to load some datas</a>