I am looking to enhance my programming experience and I believe I can do that by creating a Visual Studio (2012) extension. I have started to dig into the documentation on MSDN, but it's dense and I am working through it.
I had a few questions:
Is an extension the correct approach for the scenario described
below?
If so, any idea which namespace I should start digging into?
Any sage wisdom/links RE: "pitfalls" or "gotcha"?
The Setup
I have a block of HTML and it has some inline CSS on certain elements. I'd like to right-click on the element and apply the inline code to a new or existing stylesheet (CSS).
The Code
<div>
<div class="ui-bar-d ui-bar" >
<span class="WBHeaderDetail" style="margin-left: 5px; margin-right: 5px;">
Name: <em class="WBHeaderDetailValue" style="text-decoration: underline;">#ViewBag.JobName</em>
</span>
<span class="WBHeaderDetail" style="margin-left: 5px; margin-right: 5px;">
Status: <em class="WBHeaderDetailValue" style="text-decoration: underline;">#ViewBag.Status</em>
</span>
<a data-role="button" data-theme="b" data-icon="check" data-inline="true" data-mini="true" >Save</a>
</div>
</div>
Arguably, the operation that extension would expose could grab a reference to a given element and inspect for inline CSS (style tag), remove it from the element, and then append that CSS to a new or existing stylesheet in the project/solution. Whether or not the element already has a value for the 'class' attribute could impact the vendor selected for this project.
UPDATE
Saw this on: http://www.asp.net/vnext/overview/aspnet/whats-new
Smart Tasks
In Design view, complex properties of server controls often have associated dialog boxes and wizards to make it easy to set them. For example, you can use a special dialog box to add a data source to a Repeater control or add columns to a GridView control.
However, this type of UI help for complex properties has not been available in Source view. Therefore, Visual Studio 11 introduces Smart Tasks for Source view. Smart Tasks are context-aware shortcuts for commonly used features in the C# and Visual Basic editors.
For ASP.NET Web Forms controls, Smart Tasks appear on server tags as a small glyph when the insertion point is inside the element:
Can I get my code into that dialog?
THANKS!
I made a small VS extension last year for class that turned out pretty well. It had to do with sorting, formatting and re-organizing C++ code files. It's a little different than what you want to do, but I can suggest that you take a look at CodeMaid. It has a surprising number of features, and since it's open source, the source code really helped me out when I was working on my extension.
Unfortunately, you're working with HTML and Visual Studio only provides the code model (basic AST) for C# and a small bit of C++. You're unlikely to get any help from visual studio with HTML editing.
So I would do 2 things. First, look at these tutorials. They'll help you create the base for your extension and get you familiar with the API. (You'll likely have to look for others to augment your knowledge, as MS tutorials aren't the greatest.) Second, polish up on your regular expressions. The best way to complete what you want is probably to parse the file yourself and locate all instances of inline style tags. Then add a right-click menu item and locate the appropriate tag when you need to.
But again, I would start with the basic tutorials. The VS extension API is a bit odd, so you'll probably want to get used to it by doing simple stuff first.
Good luck, you'll need it. :p
EDIT: I know this doesn't answer your question directly, just offering a bit of advice.
Yes a VSIX is the way to go.
You can take a look at some of the code from Web Essentials. Web essentials does something similar to what you want to do.
The following is a link to the CSS sorter on github: https://github.com/madskristensen/CssSorter
And this one is a link to the HTML ZenCoding feature:
https://github.com/madskristensen/zencoding
Since both of them involve dealing with HTML, CSS you could get a lot of information looking at the code. The only difference with your project is that you're actually targeting both at the same time and are looking into accessing multiple files. Unofrtunately, for HTML and CSS I don't know wether there's a built-in parser available.
There are a few packages availble on NuGet though, so you could try these out:
ExCSS Stylesheet Parser: http://nuget.org/packages/ExCSS/
HtmlAgilityPack: http://nuget.org/packages/HtmlAgilityPack/
I haven't worked with these packages directly, but I guess you'll have to try them out and see if it fits.
As for the smarttasks: this is normally a part of the control designer and I don't think it's appropriate for what you want to do. I would just add your extension to the context menu
Related
I have recently inherited a web app using the EXTjs framework. I'm not really that familiar with it, but I have been learning it the best I can over the last few months. I have recently been given an assignment to update the entire application to comply with 508 Compliance, that is to say, make the application accessible for those with vision issues. I was given a deficiency list that gives examples where the software doesn't comply for various reasons. I guess I need a little help in understanding how this works. I've looked at the EXTjs documentation and it does say that it has accessibility features available in it, but I haven't really been successful in finding what to do. Those using the application are using the JAWS screen reader if that makes any difference.
A few of the things I know that I need to fix are:
Some elements need to be tagged as a heading so the screen reader can read it programmatically an to give the web page some structure.
When tabbing around a table/grid the data is read without any context/header information.
Color is used as a visual cue to indicate action(ie required field). I'm supposing this is for color blindness and some other visual cue needs to be added.
Modal windows can't be resized or moved by the keyboard.
Needs a mechanism to bypass blocks of content that are repeated on multiple pages.
Pages do not have titles(this is a single page app).
Keyboard operable UI elements do not have a visible indication of focus(radio button group doesn't show focus, even if selected one does).
Name/State of UI elements in the product can't be understood(ie the name of expand and collapse buttons are read as expand panel or collapse panel by assistive tech without context to what is being expanded or collapsed).
There are many other issues, but this gives some idea of the scope of the changes required. As I have stated above, I've done a lot of examination of the EXTjs documentation at their site as well as google searches on how to make applications more accessible. But I'm not really seeing what I need. Much of this application is just configuring EXTjs templates and then loading them with much of the meat of the application being handled by the EXTjs built in js code.
I would appreciate any help, useful sites with examples, or code snippets on how to accomplish some of this. I'm hoping that once I get started with some examples, I can just go on from there.
Thanks.
Most items come with aria support. Personally I would add look into each component and add an automated aria support. E.g. button ==> aria.label = button.text
Take a look at ariaAttributes, ariaDescribedBy, ariaLabel and ariaLabelledBy. Some have ariaErrorText, ariaHelp.
Next take a look at tabIndex. You want to ensure that you can use TAB to jump through the fields, buttons, ...
We're using a CMS that provides a broken link report; however, that broken link report is useless to us because it detects some 1,300 links as broken because they are deep links into many different screens in our web app product. (I.e., a static HTML page links to a web app that requires authentication that our authoring tool can't process so it flags the link as broken - 404.)
Ideally, we'd be able to rely on the CMS reporting of broken links, and one thing I know works is to use an onclick event instead of an href. But I would like to know if there are reasons we should not do that.
Admittedly, I've read quite a few threads asking similar questions about onclick="function()", but they all seem a shade or two different from what we're trying to accomplish.
Is it okay to use an onclick event for these links instead of the standard href? (See code below.)
What problems or limitations would we encounter if we did? (For example, I'm not sure we'd be able to test if these onclick links actually work, at least not via automated link checkers, and that may be okay.)
Are there other options to have these links essentially skipped over by a broken link crawler/checker?
I'm looking for a better understanding of best practices here.
Thanks
Link Text
<span onclick="location='[[relative path to web app]]'" class="uxlink">Link Text</span>
onclick breaks accessibility for screen readers. You need to add all your ARIA features manually. It also breaks SEO because crawlers can't follow the link.
As stated by Google regarding hiding rich snippets from the user:
It can be tempting to add all the content relevant for a rich snippet in one place on the page, mark it up, and then hide the entire block of text using CSS or other techniques. Don't do this! Mark up the content where it already exists.
The problem I am looking at, however, is that in some frameworks this is excessively cumbersome as each of the desired rich snippets live in one of dozens of templates. From a developer perspective, this creates fragmented code all over the place which complicates the modular nature of the framework.
The main question is, what would be a good technique to use so that the rich snippets can exist all in one template? I've considered expanding on the concept of an 'SEO Block' which would live at the bottom of the page and provide the desired rich snippets, but this just seems messy and causes duplicate content.
Are there any other possible tricks to use here so that this markup can be hidden from a user? If I place the rich snippet content into a div that uses jQuery slideToggle(), is that still 'hiding' the content as far as Google is concerned?
It is possible to hide your rich snippets with meta keyword. I have accomplished this at my personal website(victorlava.com). Take a look:
<article itemscope="" itemtype="http://data-vocabulary.org/Person">
<meta itemprop="name" content="Victor Lava">
<meta itemprop="photo" content="http://www.victorlava.com/external/victor-lava.png">
<h2>I am a Professional <span itemprop="title">Web Developer</span> who creates web applications</h2>
<p itemprop="description">I am a professional <b>web developer</b> from <span itemprop="location">Lithuania</span>, who trully enjoys <b itemprop="role">coding</b>. I develop all kind of <b>web</b> things. Web things like: <b>web applications</b>, <b>websites</b> and <b>custom cms</b>.
For my frontend development I like to use: <b>HTML5</b>, <b>CSS3</b> and <b>Javascript</b>. These are the latest web technologies, which must be used in the development process by <b>professional</b> web developer. For my backend development I usually use web technologies like: <b>PHP</b>, <b>MySQL</b>, other <b>APIs</b> and <b>CodeIgniter</b>.
I am that kind of <b>web developer</b>, who isn't afraid to experiment. By experimenting I am able to create unique and eye-catching <b>websites</b> for my clients. I am open for new proposals, so feel free to <b>hire me</b>.</p>
</article>
Use the: <meta itemprop="name" content="Your Content">
The meta property works just fine, you don't need to hide anything with CSS, nor Javascript. In my opinion, the meta property would be the best option to you. Btw, you can read more about rich snippets and how to test them here http://blog.victorlava.com/rich-snippets-testing-tool-webmaster-seo-very-useful/.
Google penalizes for duplicated content on the same page too.
I assume we're talking about a site showing lots of different kind of stuff (ie. a site selling books, movies, CDs, etc.), where it's just not possible to choose only one entity for every page.
In cases like this hardcoding microdata may be too complicated, especially if you're using a framework (or a CMS) that you don't know how to bend to your needs.
Anyway, you can try to set custom fields (I'm thinking about Wordpress, but this could be extended to virtually anything) to at least identify the page main entity.
From there it should be easier, as more or less every entity has almost the same set of properties which you finally could hardcode.
I'm a little curious about how the editing of Google Docs works. How did they implement an editor within the DOM? It does not really looks like a form with a textarea, but rather a normal document body with an additional cursor. I guess it is some javascript technique behind.
Is there any free library that I can use for achieving this kind of functionality, or how can I implement it myself?
2019 Update
I'm pretty certain the answer below was accurate at time of writing in 2010 but has been substantially inaccurate for several years. Here's an answer of mine to a similar question in 2012 that may be more accurate, although still possibly not massively helpful.
How does Google Docs achieve content editing?
Original answer
It uses editing functionality built into all modern desktop browsers, accessed at document level via setting the designMode property of the document to "on", or at an element level by adding a contenteditable attribute with value "true" (also triggered by setting the contentEditable property of an element to the string "true").
A very common strategy for editing a piece of content in a web page is to include an iframe whose document has designMode turned on.
Coupled with this is document.execCommand, which in an editable document can be used to apply various kinds of formatting. For example:
document.execCommand("bold", false, null);
... will toggle whether the selected text is bold. There is a pool of common commands between browsers but there are some discrepancies as to exactly how some are implemented. More info can be found here at MSDN for IE and here at MDC for Firefox. Can't seem to find documentation for WebKit.
Since mid-2010 Google Docs seems to completely having switched away from relying on the browser for editing mode.
Instead they built their own text/HTML editor using JavaScript and DOM.
They explain it in a lengthy blog posting on how they implemented the functions.
Having searched for 3rd-party vendors offering similar concepts, I found no one so far. Would have been a great for iOS since they seem to not support the contentEditable attribute until iOS 5 (and even then, there are issues)
For mee it looks like any HTML editor. They just coded their own JavaScript HTML editor. Even the HTML edit view doesn't have any magic.
A good and free HTML editor is TinyMCE but there are many others out there, even some very powerfull proprietary like CuteEditor which is available for PHP and ASP.NET.
BTW: The content of the document (in Google Docs) is placed in an iframe, just as it is in CuteEditor (and probably also in TinyMCE).
As other people have said, google is very uptight about what information they share. However, they have posted a lengthy blog idea about how they built their own word processing system FROM SCRATCH. Building this, would require you to have your own experience team with several days needed to complete it.
Link to lengthy blog is here:
https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html
Essentially, they capture where your cursor is, place a div that looks like a line, and manually insert a letter at the place your cursor is
Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).
No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.
Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.
You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx
No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css
It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.
Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.
With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org