I just heard about zen-coding, which basically is just a script that generates markup based on a css-esque selector, ex:
div#foo > p*6
generates
<div id="foo">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
Edit: Here's a more advanced example..
And PS - I'm not even going through any API, I'm totally guessing based on my CSS selector knowledge, this is very easy and intuitive for me.
ul#nav > li[id] * 6 > a
Generates
<ul id="nav">
<li id="">
</li>
<li id="">
</li>
<li id="">
</li>
<li id="">
</li>
<li id="">
</li>
<li id="">
</li>
</ul>
when you hit a shortcut such as Ctrl-E. Very very useful if you do a lot of front end development. I had the idea of the exact opposite, a CSS selector generator which basically parses markup and generates selectors so one can go in a tool such as Firebug and rapidly see live changes on the dot, I just never bothered to actually finish the script I had started.
It's currently supported in TextMate, Dreamweaver, Aptana, NetBeans, unfortunately not vim/emacs however there is a fork named sparkup which works on vim ( I use that now ).
I'm wondering if anyone has come across such plugins or tools in the past - I'm aware that there are snippet scripts in Vim/Textmate/Emacs and other powerful editors, just curious of what else is out there in the wild.
Hm. I write a lot of HTML and CSS every day and I am not excited. The paragraph you mention I write in five seconds, and six times Ctrl+C and Ctrl+V. Granted, there may be scenarios when a meta language will save more time but I have never felt the need for one. When there are really massive amounts of HTML - or SQL, or arrays - to produce, I will write a small PHP or VB script for the task. I wouldn't want another meta-language to produce something in another language.
Maybe useful for others but not for me.
If discussion about the general usefulness was what you were looking for. Reading your post a second time, I'm not that sure any more. Anyway. :)
If you are developing rails, check out Sass and Haml
Sass can do use variables and do basic math:
// Sass
!blue = #3bbfce
!margin = 16px
.content_navigation
border-color = !blue
color = !blue - #111
.border
padding = !margin / 2
margin = !margin / 2
border-color = !blue
renders:
/* CSS */
.content_navigation {
border-color: #3bbfce;
color: #2aaebd;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Haml uses indentation instead of divs and matches the css # and . system for labeling classes and divs:
#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= current_user.bio
renders to:
<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
<div id="address"><%= current_user.address %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= current_user.bio %></div>
</div>
</div>
I'm really amazed that you guys are having this conversation.
I've been doing Web Development for 4 years and I can not remember the last time that I've had to write something like
<li>some text</li>
more then once in single instance.
The most html that I would write in any given point is something like
<ul>
<?php foreach ( $menu as $item ) : ?>
<li><?php echo $item->title ?></li>
<?php endforeach; ?>
</ul>
Needless to say, I really don't see the point in learning a tool to speed up writing of stastic HTML. It's like getting a bigger shovel, you're only going to dig yourself into a bigger whole.
I think you should be asking yourself, how can I eliminate the amount of static html that I generate?
The answer to that question is to use CMSs like Joomla, Drupal or Wordpress.
If you absolutely have to write static html sites, then look at something like Sphinx.
Sphinx completely eliminates the need to write HTML and it allows you to create static sites with multiple pages without ever writing a single hard coded html link.
Sphinx uses reStructuredText markup. I will show you how you would generate your code in reStructuredText.
- `Joomla`_
- `Drupal`_
- `Wordpres`_
- `Sphinx`_
_ :doc:`Some intermal Page <internal/file>`
.. _Joomla: http://joomla.org
.. _Drupal: http://drupal.org
.. _Wordpress: http://wordpress.org
.. _Sphinx: https://www.sphinx-doc.org
I tried to show how this would work with reStructuredText, the example that you have doesn't exactly make sense in Sphinx context because you would never create a tags without providing links to them. But you get an idea I hope.
The Blueprint CSS framework has a Rapid HTML/CSS Development-like tagline:
Spend your time innovating, not replicating.
Related
I want to write semantic beautiful no-nonsense HTML. When is the right time to include class and when it's not? Should I add class on every element of my HTML?
To write semantic markup, we must use HTML tags correctly so that our markup is both human-readable and machine-readable. When we write semantic markup we can no longer select HTML elements based on visual presentation. Instead, we select HTML elements based on their semantic meaning, and then use CSS to define the visual presentation of our content. When writing semantic markup, the presentation of web page elements is kept completely separate and distinct from the markup of the content itself.
<body>
<ul class="post">
<li class="title"> <h3>Title of Post</h3> </li>
<li class="content"><p> Lorem Ipsum bla bla..</p></li>
<li class="hashtag">#samplepost
</li>
</ul>
</body>
<style>
.title{code}
.content{code}
.hashtag{code}
</style>
or
<body>
<ul class="post">
<li> <h3>Title of Post</h3> </li>
<li><p>Ipsum bla bla..</p></li>
<li>#samplepost </li>
</ul>
</body>
<style>
.post > li > h3{code}
.post > li > p {code}
.post > li > a {code}
</style>
Which of these is more semantic? Should we use class on everything or only when necessary?
Only use classes when you want to style a group of elements in a similar way (and ids for unique elements), it can be confusing for someone picking up your code if class names don't have any styles attached to them, and it just adds clutter.
Using semantic tags will make your html more semantic - ie. header, nav, main, footer, aside - etc. Some of these tags even make it easier for screen readers to navigate. w3 schools has good info about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp
It is better not to be attached to HTML tags, who knows where else you will have to use a similar interface. It’s best to stick with some CSS methodology (for example BEM) and write styles based on CSS classes. From the presence of classes, the layout will not be less semantic. The main html tags to write correctly.
In general, if you want to avoid problems in the future, use the css classes.
I would write like this:
<body>
<div class="posts-list">
<h3 class="posts-list__title">Title of Post</h3>
<ul class="post-list__ul">
<li class="post-list__item">
<p> Lorem Ipsum bla bla..</p>
</li>
</ul>
<div class="posts-list__hashtag">
#samplepost
</div>
</div>
</body>
Creating classes everywhere is a lot of work and can potentially cause some problems later on. If you add a class to every HTML tag, imagine how hard to maintain the code is going to be if the project becomes bigger. As mentioned above there are specific methodologies which can be really helpful, and BEM is a popular, but not the only one, you can use other. If you don't want to use methodology and stick with simple classes for now (though at some point I really suggest diving into that topic, you don't have to know perfectly how to use specific methodology, but how they works, if you ever join any team working with code, then they are going to tell you what methodology they picked for the project), I suggest using second code, but with comments:
<body>
<!-- Post -->
<ul class="post">
<!-- Title -->
<li>
<h3>Title of Post</h3>
</li>
<!-- Content -->
<li>
<p>Ipsum bla bla..</p>
</li>
<!-- Hashtag -->
<li>#samplepost </li>
</ul>
</body>
<style>
.post>li>h3 {
code
}
.post>li>p {
code
}
.post>li>a {
code
}
</style>
Comments are really simple and powerful tool. They will help you getting oriented in the project really quick, and avoid adding unnecessary classes for semantics.
The first thing to note is your content is not a list, so you shouldn't be using ul/li. That bad semantics, and as such worse than no semantics at all.
Your semantic markup is this:
<body>
<h3>Title of Post</h3>
<p>Lorem Ipsum bla bla..</p>
#samplepost
</body>
If you want to create a containing block for your post, to might reasonably wrap it in a div element, and although it's not necessary for such simple content, you could also consider wrapping it in a main element. You could put your anchor inside a p element but that makes no semantic difference.
Now you add one or more classes to any element when it is sensible to do so. What is sensible? It means not going over the top, forcing a class onto an element just because it looks naked without one. Generally, a good rule of thumb is to add a class when there's a utilitarian purpose in doing so. Classes are a way of putting you content in to categories, so that categorisation should be useful in some way.
For example, it might be that you want to style all the content with a particular category a similar way. Or it might be that you want to add some common functionality via JavaScript to all the content in a particular category.
Or it might be that you want to identify a category of content for your maintenance purposes. For example, suppose you have a large document describing products that you sell. With each product is a price. Even if you have no intention of styling the price differently from the other content, nor have any relevant JavaScript, you might add a class of "price" to each one, so that when the time comes to update your prices, you can easily find them all in your editor, and thus make sure that you don't miss one.
For each utilitarian purpose, think about opportunities, rather than necessities. By adding a class to categorise some some content, you are creating an opportunity for common styling, or functionality, or discovery to be applied.
Our project usually has a professional web developer that handles this sort of thing. But ours left, and we're still looking, so this weirdness falls to me. We have a situation where a list of lines under a node has to affect the parent node's look.
<span class="feedback">
<ul>
<li class="info">Just an info message</li>
<li class="error">This is an error</li>
</ul>
</span>
In the above, if all the li's are not error, we want one look, but if there's even ONE error, we want a different look. Is that something CSS can do? if so, how? Is there something I can do on feedback that makes it show one way under no errors, and a different way if there are?
Appending class has-errors to span.feedback on the back-end is not an option? If you have control over what comes from the back-end I'd try to do something like such approach instead (it's somehow simpler):
<span class="feedback has-errors">
<ul>
<li class="info">Just an info message</li>
<li class="error">This is an error</li>
</ul>
</span>
Otherwise, as far as I know, it's not possible to accomplish precisely what you're asking only through CSS. But if you use JS, you could also make it happen (far from ideal), IMO.
I'm currently writing html/xhtml by hand, and that's fine to me, but I would like to ease things a little bit, especially for writing footnotes.
Today, here is how I write footnotes:
<p>Here is a footnote<a id="ref1b" href="#ref1">[1]</a>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
<h2>Notes</h2>
<p id="ref1">[1] But this one isn't very helpful.
<!-- Let's add a go-back-to-the-text arrow -->
↩
</p>
</div>
The idea would be to make things automatic, and potentially done on the client side (by the browser), so that I could write something like that:
<p>Here is a footnote<ref id="1"/>.</p>
<!-- And at the end of the document -->
<div class="footnotes">
<h2>Notes</h2>
<ref-def id="1">But this one isn't very helpful.</ref-def>
</div>
So ref and ref-def would simply be evaluated on the fly by the browser.
Is this possible only using html/xhtml and css?
For completeness purpose. As of today there is a footnote tag in HTML.
https://www.w3.org/MarkUp/html3/footnotes.html
How it is presented to clients is left to implementors. Yo can use more html or css for a better formatting.
<DL>
<DT>Hamlet: <DD>You should not have believed me, for virtue cannot so inoculate our old stock but we shall relish of it. I loved you not.
<DT>Ophelia: <DD> I was the more deceived.
<DT>Hamlet: <DD>Get thee to a nunnery. Why wouldst thou be a breeder of sinners? I am myself indifferent honest ...
</DL>
<fn id=fn1><i>inoculate</i> - graft</fn>
<fn id=fn2><i>relish of it</i> - smack of it (our old sinful nature)</fn>
<fn id=fn3><i>indifferent honest</i> - moderately virtuous</fn>
the way you're doing this now has the advantage of being accessible and standards compliant - it will work with any browser - even with javascript disabled. Also search engines will be able to make sense out of this.
So there are some benefits in doing it this way.
if you decided to go for a shorter alternative, then there's plenty of jQuery plugins that will make your task more comfortable. e.g. look at https://github.com/nicholascloud/footnote.js
If you go for that approach please also note, that your site speed will suffer as users will have to download plenty of javascript to get your footnotes working.
I have a question which I searched but could not find an answer yet.
I need to embed content of an html page within a html page. I basically want iframe functionality without using a separate page but just the content itself.
I also need mother style sheet won't effect child style sheet in the same page.
so it will be like below and I need the magic_tag
<body style=1> mother page
<magic_tag><body style=2> child page content </body></magic_tag>
</body>
I wonder if this is possible or do I want something impossible
You're approaching this the wrong way, try this ->
Don't give anything in the child "page" the same class or id as the parent "page"
http://jsfiddle.net/8pFMe/6/
<body>
<div class="container">
<div class="nav">
<ul>
<li>Home </li>
<li> Link </li>
<li> Link2 </li>
<li> Link3 </li>
</ul>
</div>
<div class="wrapper">
<div class="sidebar">
<ul>
<li>Sidebar Stuff</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
<div class="body">
<div class="second-page">
<div class="second-container">
<div class="second-nav">
<ul>
<li>Home</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
<div class="second-wrapper">
<div class="second-sidebar">
<ul>
<li>Sidebar Stuff</li>
<li>Link</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
</div>
<div class="second-body">
<p> This looks similar to an iframe, but it's not an iframe.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
css:
.container{
width:500px;
margin:0 auto;
}
.nav li, .second-nav li{
display:inline;
list-style:none;
padding:0 5px;
}
.sidebar{
float:left;
width:150px;
}
.body{
width:340px;
float:left;
padding 5px
}
.second-page{
border:1px solid #999;
padding:10px;
}
Most likely, you should use iframes anyway - most likely, you were having a communication problem with your supervisor. Maybe their degree is in managerial stuff or so, or it is in CS, but they don't know much of JavaScript. Maybe they don't even know what an iframe is. That is most likely, and that's why you got all those down-votes. It is simply hard to fathom any scenario where sane people (who aren't having a communication problem right there) would really want to do something like "do what iframe does --that is, embed a page--, but without using iframe". And you are saying you want to "embed a page", right? So, use iframe, there you go. I could say, in order to "do what iframe does, but without using it", use an svg tag, and then a foreignObject tag inside that, that is kind-of half way like an iframe. But again, it seems unlikely that this is what you really want.
But you deserve the benefit of the doubt. Maybe I'm wrong, and you really should embed the page using "copy and paste" - which is a lot more work than iframe. It could be about your page staying the same when the embedded page goes down or changes, who knows.
In that case, you would indeed get "body inside body" in your HTML, from copying the body you want to embed from the foreign page's HTML into your own page's HTML. (you'll also have to copy some-but-not-all JavaScript, and some-but-not-all CSS, and all that can take quite some time.)
"body inside body" most likely isn't "well-formed", but it is OK to ignore that, because browsers (having to be backwards compatible) are very very robust when it comes to non-"well-formed"ness.
Then, when you want to ensure that the foreign CSS will apply to the embedded part, while the CSS of your page doesn't apply, the "body in body" quirk might just be a blessing in disguise. Namely, you could then prepend body>body to every path in the copied foreign CSS (except if it contains body, then replace body with body>body). And then, give the outer body a class which the foreign page is certain not to use (such as, use your own name), and prepend body.coskan everywhere in "your" CSS. This is very similar to what Jacques is suggesting.
Maybe a better idea (if indeed "creating an offline copy" of the foreign page is the issue) is this: Open the page you want to embed in a separate window/tab. Then, write some JavaScript, which uses window.getComputedStyle and element.style.lorem=ipsum in order to modify each dom node (within the part of the page you wish to embed) so that it has the style used in rendering (the computed style) as an inline style, so that all the CSS is "pushed into" the HTML (or DOM). Then, insert your modified HTML into your page. Most likely, someone has already written such a "CSS inline-ifyer" tool. The resulting HTML is "ugly", but who cares. It does what you want, and this method is a lot faster (development time) compared to the "Jacques method", and the embedded page really is static, unlike it would be, were you using iframe. ("static" meaning, if Oracle changes their page, it does not affect your page.)
On second thought, above "better idea" is really only/mostly suited if the embedded page doesn't have JavaScript; otherwise, better stay with "Jacques method". Yet another approach (if indeed, the to-be embedded part is non-interactive): make a screen shot, and include the image.
But maybe it's not "static" at all, and you actually need to communicate with the foreign page (e.g. query external database). Then, my initial "miscommunication assumption" is even more likely. Why on earth, in that case, not iframe? Well, you could do an XMLHttpRequest, and then dissect the result with JavaScript. It's then much more flexible than the iframe. But much more work, also.
I'm currently trying to come up with a good and accessible way to format a status indicator which should be rendered within a set of wizard-like pages on a website. The website should provide a multipage form with a status indicator on top of it as demonstrated in the wireframe below:
Given the new progress-tag in HTML my first thought was to do something like this:
<progress value="2" max="3">
<ul>
<li>Beginning</li>
<li class="now">Right now</li>
<li>End</li>
</ul>
</progress>
... but since <progress> only accepts phrasing content using a list is not really an option. So right now I would probably go with something like this, integratinng the ARIA progressbar-role:
<ul aria-role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-describedby="state2" aria-valuetext="Right now">
<li id="state1">Beginning</li>
<li id="state2" class="now">Right now</li>
<li id="state3">End</li>
</ul>
But again, I'm not really sure if the progressbar role can be applied in such a way to a list.
Another problem is, that <progress> is rendered as progress bar in Opera, for instance, so >progress> itself is probably not really a viable solution altogether :-(
Can anyone perhaps recommend an accessible status bar that does not only rely on using a single image?
Current solution
For now I will go with following markup:
<section class="progress">
<h1 class="supportive">Your current progress</h1>
<ol>
<li><span class="supportive">Completed step:</span> Login</li>
<li class="now"><span class="supportive">Current step:</span> Right now</li>
<li><span class="supportive">Future step:</span> End</li>
</ol>
</section>
All elements of the class "supportive" will be positioned off-screen. IMO this way we should have a nice compromise of semantic markup (the state succession is in my opinion really an ordered list ;-)) and accessibility thanks to the additional header and status text for each step.
According to whatwg, you're not supposed to assign progressbar role to <ul> elements.
I'd just ditch <ul> and describe progress using (surprise) phrasing content:
<section role="status">
<h2>Task Progress</h2>
<p>You're now at <progress value=2 max=3>"Right now" step</progress>.
</section>
Update: You're right, progress doesn't suit here, it's more like an interactive form widget. I should've checked first, before taking it from your first example. But anyway, the point is there's no need to use a list (even more so, unordered list), when you can just describe what's going on in plain text. In the case that the list of past and future steps is necessary, I'd just add two more paragraphs, one before the status (‘You've completed the "Beginning" step’), and one after (‘Next step will be the "End" step’).
However, I admit that this isn't a complete answer to your question.
Also, I'd say some aria attributes look redundant to me. For example, aria-valuetext perhaps would make more sense in the context of interactive widget, when there's no other human-friendly description of its state. Though I may be wrong here.