Issue #6 (textContent, CSS/HTML, Deployment, Terminal)08/29/13
(Skip to the tools below)
If you want to grab the content of any element on the page, the first property you'll try is probably innerHTML. That's fine if you want everything in the element, including the HTML. If, however, you know that the element only contains text, or if you want to grab only the text content with the HTML stripped out, it's more appropriate to use textContent.
Let's say you have the following HTML:
<div id="module">
<p>
This is some <b>example</b> text
<span>with some random markup.</span>
</p>
</div>
If you want to grab all the text content inside of #module, you can do this:
var module = document.getElementById("module");
var moduleText = module.textContent;
console.log(moduleText);
// result:
// "This is some example text with some random markup."
The variable moduleText (displayed in the console) now holds the text shown in the comment on the last line. Notice that the <p>, <b>, and <span> tags have been stripped out and only the text content remains.
You can see this in action (with some CSS for emphasis) in this JS Bin. Notice the visible styles applied to the three elements inside #module. When you uncomment the last line, the styles disappear because the HTML gets stripped out when the content inside #module is replaced by the same content stripped of HTML, and thus stripped of its CSS hooks.
All browsers support textContent except (wait for it) IE6-8. But it's mostly not a problem, because you can use the IE proprietary innerText in a feature-detect branch that targets those browsers. MDN has more info on the differences between textContent and innerText. That article even mentions that, for performance reasons, you should use textContent instead of innerHTML when you are only manipulating HTML-less text.
Now on to this week's tools!
CSS/HTML Tools
emwaw.me
This is an interesting CSS naming concept and accompanying generator. It combines the BEM methodology with SCSS helpers, resulting in a naming pattern based on the Greek alphabet.
curly-braces
I wasn't too excited to see yet another set of CSS3 code generators. But these are actually really easy to use and seem less confusing than some other ones I've seen, though not as attractive.
elementTransitions.js
A CSS transitions library based on a Codrops article.
KNACSS
A simple and lightweight responsive CSS framework for any size project. Features include IE fallbacks, grids, and LESS and Sass versions.
Emmet LiveStyle
This one has been making the rounds in the industry, and for good reason. It's a plugin that enables two-way CSS editing and live updating between browser and text editor (only Chrome, Safari, Sublime for now). View the screencast for details.
Bootstrap switch
A bootstrap-based library for styling checkboxes as animated switches. For IE8+ and includes many different sizes, styles, and colors.
extractCSS
A tool to build a stylesheet framework from already existing HTML. Looks useful for those who like to code all their HTML before writing any CSS.
Perf/Deployment/Testing Tools
Monsta FTP
"Open source PHP/Ajax cloudware that puts FTP file management right in your browser, anywhere, any time." A lot of you have probably moved away from FTP, but maybe this is an option for legacy projects.
shrinker
An online tool to minify and concatenate JS and CSS files. In a good deploy process, you're doing this automatically, but maybe this will come in handy in some instances.
ngrok
"Creates a tunnel from the public internet to a port on your local machine. You can give this URL to anyone to allow them to try out a web site you're developing without doing any deployment."
localtunnel
Same idea as the previous tool, this one claiming to be "the easiest way to share localhost web servers to the rest of the world."
(byte)size matters
A simple online tool where you can paste a snippet of text and find out exactly how many bytes it is.
Web Developer Checklist
A Chrome extension that "analyses any web page for violations of best practices". Don't use it on my websites, please. :)
HTTP Status Code Checker
"Check status code, response headers, redirect location and redirect chain of an HTTP connection."
grunt-notify
"Automatic desktop notifications for Grunt errors and warnings using Growl for OS X or Windows, Mountain Lion Notification Center, Snarl, or Notify-Send."
Git/GitHub/Terminal Tools
5 minute fork
I love this tool. This should never be necessary, but if you find a repo that has an index.html file, but no demo/staging location, 5 minute fork will automatically display it for you.
Gitrep
Uses community created tags to search, manage, discover, and compare GitHub repositories.
GistBox
"The Beautiful Way to Organize Code Snippets." Split panel, color coding, search, filters, plus a built in code editor. Looks pretty powerful.
ASCII.IO
"ASCII.IO is the simplest way to record your terminal and share the recordings with your fellow geeks. Simply record and upload your terminal session with a single command, and ASCII.IO will play it back in your browser."
Suggest Your Tool via Twitter
Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please.
No Ads
To help Web Tools Weekly stay ad free, you can go to the donate page and give something small ($2 per subscriber would be more than enough). Thanks to all those who have already contributed!
Criticism? Corrections?
If you have any opinion on how this newsletter can be improved, or any corrections, feel free to reply to this email directly.
Before I Go...
There's a Kickstarter project that should interest anyone who writes JavaScript on a team. It's called NoFlo and it has the potential to be a revolutionary tool for JS devs. The project has received quite a bit of funding but hasn't yet reached its goal. If you think it's worthwhile, check out the video and contribute what you can.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
