Quick Completions in HTML? - html

I've been watching some 'codecasts' on CSSDeck.com, and I frequently see people typing things like this: ul>li*7>a to create a large amount of HTML very quickly. That code would generate this:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
As seen on: http://cssdeck.com/labs/creating-sweet-3d-pagination
What plugin is this?

It used to be called Zen Coding, but is now called Emmet.
There are plugins for most editors, including Sublime Text 2 (which I'd recommend if you aren't already sorted for one!)
For Sublime Text if you are using Package Control, it's a simple package install emmet away.

Related

Using preg_replace regex on <ul><li> items

so i am trying to fetch news from an API, everything is working fine so far, except that i got some issues with the format.
From the API the News are in JSON format, i already got them visible on the page and it looks alright, except for <ul> and <li> items
When using a list, the dots will be over the text, since its closing the tags right after. I have been googling for a while and i haven't found a proper solution, using list-style didn't help.
Here is the preg_replace i use for the list items:
/*[list]*/
$tmpText = preg_replace('#\[list\](.*)\[/list\]#isU', '<ul>$1</ul>', $tmpText);
/*[*]*/
$tmpText = preg_replace('#\[[*]](.*)#isU', '<li>$1</li>', $tmpText);
And this is the output on the page i get with this:
<ul>
<li></li> Halloween content implementation
<li></li> Barber implementation and polishing
<li></li> Additional work on modular vehicles
<li></li> Finishing touches on the ATM interface
<li></li> Implementation of halloween gestures
<li></li> Final preparations for permadeath testing
<li></li> Creation and implementation of new admin commands
<li></li> Additional work on the farming system
<li></li> Bugfixing
</ul>
I am not really sure how to fix this, or how i would get the text between the tags, since its input is always different, i would appreciate some tips
Never mind I just solved my own issue, I had a huge brain fart here.
This is the solution I thought about
/*[list]*/
$tmpText = preg_replace('#\[list\](.*)\[/list\]#isU', '<ul>$1</li></ul>', $tmpText);
/*[*]*/
$tmpText = preg_replace('#\[[*]](.*)#isU', '<li>$1', $tmpText);

How To Write Snippet For Sublime

i am trying writing some useful snippets for me,i had already written some basics one in my element.sublime-snippet,but i found in emmet-sublime they have some snippet which multiply the elements.
eg : ul>li*3
Result:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
how can i apply logics in my simple snippet xml code.

How to add a pre-made template to products

I have an eBay shop and when I make a listing I have a pre made template and I just import information to this template.
I have a short description, features, and specifications. And I need to add automatically <li></li> to every line and a pre made HTML table with custom style, Which will know how to separate with "/" symbol like I have in my private listing tool.
Is this even possible? And if it is any idea how?
I do not believe Magento works in that manner however there is an easy efficient way to accomplish this manually.
Try putting the code in Sumblime text 3 with teh Emmet plugin.
From there you can type a command like ul>li*8 (the 8 is the # of items or <li></li> tags) and then press the tab key.
the results will be
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
From there you can fill in the blanks between the <li></li>.

MySQL search and replace regex

I'd like to remove the <ul> and <li> tags without hurting the inside tags for all occurrances of this kind of structure:
<ul class="listapdf">
<li>something</li>
<li>something</li>
</ul>
What command can I use in MySQL command line?
MySQL's REGEXPs can locate rows, it cannot do substitutions. Do the processing into your client code.

How to create a "class" in HTML for my navigation bar?

I am looking for a way to have a navigation bar in all my .html pages without having to copy and paste it multiple times.
Here is the code:
<center>
<nav>
<ul>
<li>Home</li>
<li>Education </li>
<li>Employment History</li>
<li>Volunteer Work</li>
<li>Contact Information</li>
</ul>
</nav>
</center>
Every time I make a change in one of the links, I need to make changes in all my HTML files. I was wondering if I could have this chunk of code be a "class" of some sort, and have a reference to it in all my html files with some sort of attribute representing it. So, when I change the list "class" all the html files will be reflected in that change.
You can give you navigation a class this way.
<link src="style.css"/>
<body>
<center>
<nav class="navClass"> //giving the nav element a class
<ul>
<li>Home</li>
<li>Education </li>
<li>Employment History</li>
<li>Volunteer Work</li>
<li>Contact Information</li>
</ul>
</nav>
</center>
</body>
If you do this to all your nav's and use the same css document for all the pages you can call them in css this way. You will need an external css doucment.
//style doucment
<style>
.navClass{background-color:#FF0000}
</style>
You could also try using a jquery template plugin
Check one out here:
https://github.com/codepb/jquery-template
You could make your menu with JavaScript or as suggested by using a server side technology.
But in clean html you'll probably have to use frames which I wouldn't recommend. There might be a solution in html5 but I'm not sure.
If you're used to OOP I'd recommend the server side aproach.
Good luck!
Most text editors have a Find and replace in files or directory function. Other people have mentioned the likely solutions for server-side solutions - Jeremy Keith's book Bulletproof AJAX proved to be useful for me but requires server-side technologies such as PHP or IIS installed.
Otherwise, I used to create templates using dreamweaver which allowed you to update a menu which then updated all the places that menu was included, but there are probably open source solutions that allow the same thing that people may suggest?