I'm just discovering Haml, and I was wondering if there was anthing like quantifiers.
I tried to find something about it in Haml documentation, without success. I was thinking about something like this:
.container
%p(*5) Lorem ipsum
For this, the input would be:
<div class="container">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
Does Haml supports anything like this?
Haml doesn’t have a syntax like you describe, but you can run code with -.
You could achieve your example with something like:
.container
- 5.times do
%p Lorem ipsum
This is Ruby code, you will likely need to vary it if you are using a different Haml implementation.
Seems like the only way is
- 5.times do
p Lorem ipsum
Related
I have an accordion that is rendered using van11y-accessible-accordion-aria
The markup outputs as:
<div className="c-accordion__items js-accordion accordion" data-accordion-cool-selectors="1" aria-multiselectable="true" role="tablist" id="z3j2diubs8r" data-hashaccordion-id="3o3nlqickh">
<!-- note role="tablist" above -->
<div className="c-accordion__item">
<h2 className="c-accordion__title accordion__title">
<button className="js-accordion__header accordion__header" role="tab" id="accordionz3j2diubs8r_tab1" aria-controls="accordionz3j2diubs8r_panel1" aria-selected="false" type="button" data-hashaccordion-id="3o3nlqickh" aria-expanded="false">
<!-- note role="tab" above -->
The Why
</button>
</h2>
<div className="c-accordion__item-components js-accordion__panel accordion__panel" role="tabpanel"
aria-labelledby="accordionz3j2diubs8r_tab1" id="accordionz3j2diubs8r_panel1" data-hashaccordion-id="3o3nlqickh"
aria-hidden="true">
<div className="c-accordion__item-content">
<p>Duis vel nibh at velit scelerisque suscipit. Donec vitae sapien ut libero venenatis faucibus. Quisque ut
nisi. Ut non enim eleifend felis pretium feugiat. Nulla sit amet est.
</p>
</div>
</div>
</div>
</div>
When I test this for accessibility using Lighthouse in Chrome, I am getting these messages
Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.
Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. Learn more.
[role]s are not contained by their required parent element
Some ARIA child roles must be contained by specific parent roles to properly perform their intended accessibility functions. Learn more.
The learn more links goes to https://web.dev/aria-required-children and shown below is a code example that they suggest.
... and there it implies that having role="tablist" as the parent and then role="tab" for the child.
In my code posted in this question, I seem to have the proper markup as compared to the example from https://web.dev/aria-required-children
So I am at a loss as to why this is failing the accessibility check.
role="tab" must be a direct descendant (or contained within an element with no semantic meaning) of a role="tablist" element. To be fair this is really not clear in the WAI-ARIA spec but I have hit this issue myself before. (you can use aria-owns to make the association but that is more for if the tabs sit outside the tablist element)
Because your <button> is wrapped in a <h2> this breaks the pattern.
I have tested it and it appears to work in JAWS and NVDA, but just to be safe (as there are loads of screen readers and some of them may not like your implementation) I would make a minor adjustment.
Remove the <h2> that surrounds the <button> is one option and probably the one I would recommend. It doesn't make much sense to have multiple <h2> elements on a widget anyway and instead you should use a heading above the tabs you have created for the section.
A second option is to make the <h2> function like a button, but that would mean adding your own event handlers, focus indicators and tabindex="0" to make it focusable. That way you can move the role="tab" onto the <h2> itself, which removes the semantic meaning but retains the ability to navigate to it in a screen reader.
I personally am not a fan of the second option but I can see why some people may choose to do that.
One other thing I would suggest is to put the tabs and the tabpanels inside <ul> and <li>.
For screen readers that don't support tablist this means a user still gets an announcement of "1 out of 3 options" etc. So it makes it easier to understand they have options.
Also it is recommended that each tabpanel has a tabindex="0" to aid navigation once a tab has been selected. This is one of those very rare circumstances where making a non-interactive element focusable is encouraged.
You may find this W3 page on tab best practices useful.
The documentation of the bootstrap 3 container class states that 'due to padding and more, neither container is nestable".
But then, in the official examples, take this, a demo of a simple navbar, we see something like:
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
where a container-fluid is clearly nested inside a a container.
My understanding of the "neither container is nestable" sentence is that we should have just one container in a page, or on the other hand we can have multiple if they are not nested one within the other.
Seeing the examples it doesn't seem to be the case, then what does it mean that constraint? I've read also this question and some others but they don't talk about the nesting thing.
This has been brought up as in issue on the Bootstrap repo:
https://github.com/twbs/bootstrap/issues/15512
I'm not sure if the doc will be updated accordingly, but as you'll see in the issue it looks like it's ok to put a container-fluid inside a container.
On most pages of my site I make use of Microdata. Some things such as the data blog post was created, and review ratings show up in search results. Other information such as Person and Breadcrumb data doesn't.
Person
On my homepage I have a the following code. Pasting it into the Google Structured Data Testing Tool shows "Abergavenny Wales - Web Developer", but pasting the URL in doesn't show this, any idea why?
<div id="banner" itemscope itemtype="http://schema.org/Person">
<h1>Working Web Solutions</h1>
<h2>
Ruby on Rails, Sinatra & Drupal Development by <br class="responsive" />
Award Nominated <span itemprop="jobtitle">Web Developer</span><br class="responsive" />
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">Based in <span itemprop="addressLocality">Abergavenny</span>, <span itemprop="addressRegion">Wales</span>, <span itemprop="addressCountry">UK</span></span>.
</h2>
</div>
Breadcrumb
The same is also apparent with breadcrumbs. The following code works when pasted into the Google Structured Data Testing Tool but the URL doesn't return the breadcrumb.
<ol id="breadcrumb">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/services" itemprop="url">
<span itemprop="title">Services</span>
</a> ›
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/services/freelance-ruby-on-rails-development-cardiff-abergavenny-wales-uk" itemprop="url">
<span itemprop="title">Ruby on Rails Development</span>
</a>
</li>
</ol>
Maybe because Google can't show everything in the preview, and it seems that your Google+ profile takes precedence over other metadata.
I've not tested any Person functionality of schema.org yet. But I've had a nice conversation with a person that could explain me, why breadcrumbs are not working with schema.org yet. May that answer is matching for Person too.
Additionaly:
Also this helper can help you create valid microdata: http://www.google.com/webmasters/tools/richsnippets
Since Safari 5 introduced the "Reader" feature, the "RSS" button has become very inaccessible for users. (Holding down the mouse button brings up the feed subscription popup if a site provides feeds).
For some pages of my blog (index and archive) I would like to display the "RSS" button as default for two reasons:
Feed subscription makes more sense for those pages
My design is already "readable" (it almost looks identical to the page Safari Reader renders)
There is already a SO question that deals with that topic, but I want to achieve the opposite of the OP so I opened a new question.
Note:
e.g. stackoverflow.com shows the RSS icon and does not trigger the Reader feature but I couldn't figure out why.
After further investigation it turned out that Safari automatically does the right thing.
It displays the RSS button if a page has the typical structure of an index page:
<div>
<div>
<h1>A</h1>
<p>Lorem ipsum...</p>
</div>
<div>
<h1>B</h1>
<p>Lorem ipsum...</p>
</div>
<div>
<h1>C</h1>
<p>Lorem ipsum...</p>
</div>
</div>
and the Reader button if it has the structure of a single entry:
<div>
<h1>A</h1>
<p>Lorem ipsum...</p>
</div>
The problem with my index testpage was, that it didn't contain enough entries and not enough text.
This is a blog post, that sums up the elements that trigger Safaris Reader button:
http://mathiasbynens.be/notes/safari-reader
One of my most common operations in textmate is to encapsulate a block of text in a <div>.
How can i create a keyboard shortcut for this? I do not really feel like learning anything complex, so simple solutions would work best - thanks!
Maybe I didn't understand your question, but what about the "Wrap Selection in Open/Close Tag" (Ctl-Shift-W) from the HTML bundle? Having a block of text selected then overtyping the default <p> with <div> does the work. See http://manual.macromates.com/en/bundles#html
But the following snippet :
${0:${TM_SELECTED_TEXT/\A(.)<\/div>\z|./(?1:$1:$0<\/div>)/m}}
does the same thing without even typing the tag ...
HTH
This might slightly off topic, but you might be interested in using Zen coding for Textmate, which allows you produce lots of HTML with a few key strokes.
You write:
div#page>div.logo+ul#navigation>li*5>a
You get:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
(disclaimer: the example code is from the above mentioned site)
Besides that it adds features for easy navigation of editable parts of HTML, for easy wrapping of content using the same syntax as above. This last past would allow you to wrap any text (content) in whatever HTML you would like.
Happy coding :)