Task is simple. Have a tool which will parse CSS on network website, read the links to images from there and download all of them to structured folders to local disc.
The important is that tool should ready to use, and designer should be able to use. Answer "you can write the tool itself is OK", but not acceptible for ready tool .
You can get urls from css manually with regular expressions.
To accompany Roman's answer:
/\burl\(['"]?([^'"\)]+)['"]?\)\b/g
will match as $1 almost all images (almost all meaning, that the central part ['"\)] is a bit too strict and will not match URLs with either of these characters in it).
Note that you might get external stylesheets ('#import'), too, with this regexp.
Related
Doxygen's html file extensions default to .html. I'm not so concerned about what the filenames are on disk--but the internal links in the pages will still have the extension. This runs counter to the recommendations of Cool URIs Don't Change.
I did discover that there is a HTML_FILE_EXTENSION, which theoretically lets you change the extension to anything you want. You can get it as far down as .--but you can't give them no extension. Leaving it blank causes it to default back to .html. :-/
It's of course easy that when you get ready to publish, you can switch the extension to .strip-me-from-docs-for-publication. Then do a search/replace of that with nothing (or / if you believe in trailing slashes in URLs, which I think I do). In the meantime you'll be able to take advantage of browsing the generated docs locally without pushing them to the server.
I'm wondering if there's any kind of smoother way to approach the problem, skipping the search/replace step?
I guess using a script to rename doxygen output files and then search and replace the links within these files is the straight forward option.
Another way could be to use mod_proxy_html and its ProxyHTMLURLMap feature.
See http://httpd.apache.org/docs/current/mod/mod_proxy_html.html
Maybe it has to be used in combination with mod_rewrite. See http://httpd.apache.org/docs/current/mod/mod_rewrite.html and http://httpd.apache.org/docs/current/rewrite
I started to use Bracket as my IDE. I like it...
When I edit a CSS file there is great auto-complete, but when I edit less file there is no CSS auto-complete and it would be very useful.
Is there a way to turn CSS auto-complete for less files?
For some reason there isn't any built-in support for this yet but it can easily be hacked in and works quite well.
Open C:\Program Files (x86)\Brackets Sprint 32\www\language\languages.json (or whatever path you have it installed to) and scroll down to the CSS-key. Then just add "less" to the fileExtensions-array, save it and reload Brackets.
"css": {
"name": "CSS",
"mode": "css",
"fileExtensions": ["css", "less"],
"blockComment": ["/*", "*/"]
}
For some reason this isn't enabled by default but I haven't discovered any problems with it this far. Works fine with nested declarations which I initially thought would be a problem.
Updated answer:
Autocomplete in LESS files is now enabled automatically in Brackets Sprint 36 and newer (along with the Quick Docs command). The workaround in the answer above is no longer needed.
Original answer:
There's not a way to do it yet. Brackets has a public backlog, which
includes a user story for LESS code hinting
support.
You can upvote the user story if you sign in with a (free) Trello
account.
Brackets recently added
support for CSS-like code hinting in SCSS files, but that was much
easier to do. Because the SCSS tokenizer in
CodeMirror shares code the CSS one, the two
produce very similar streams of tokens, allowing much of Brackets'
existing CSS-analysis logic to be reused. The LESS tokenizer, on the
other hand, produces different token information that would require
larger code changes to support.
But it's certainly doable -- just a matter of prioritization. That's
where backlog upvoting and/or pull requests come in :-)
When I view the source code of yahoo mail, I see multiple css files in a link tag using an & symbol as shown below:
href="http://mail.yimg.com/zz/combo?kx/ucs/uh/css/271/yunivhead-min.css&kx/ucs/uh/css/221/logo-min.css&kx/ucs/avatar/css/17/avatar-min.css"
Does anyone know, how they separate each file and load them all using a single http request?
In this case, there seems to be a script that joins the css files into a single response.
The path to the script is http://mail.yimg.com/zz/combo. It accepts several parameters containing paths to CSS files, which will then be joined and possibly minified.
If you play around with the URL, you can see that you could remove the -min-Prefixes from the URL and you get the unminified CSS file in return: http://mail.yimg.com/zz/combo?kx/ucs/uh/css/271/yunivhead.css&kx/ucs/uh/css/221/logo.css&kx/ucs/avatar/css/17/avatar.css
There are several CSS minifiers around, for example CSSmin. But as this is a Yahoo page, they probably use their own CSS compressor, YUI. For details about how it works, see http://developer.yahoo.com/yui/compressor/#work.
Not familiar with the specifics, but the URL looks like a query string with the CSS files as unnamed parameters.
http://mail.yimg.com/zz/combo will be a service that loads the CSS, then concatenates and probably minifies the files before serving back to the client.
My guess is that http://mail.yimg.com/zz/combo is a small program / script which collects all params (like kx/ucs/uh/css/271/yunivhead-min.css, kx/ucs/uh/css/221/logo-min.css, kx/ucs/avatar/css/17/avatar-min.css), bundles them and minimizes them.
This is similar to the bundling feature for MVC, which you can read about at http://www.davidhayden.me/blog/asp.net-mvc-4-bundling-and-minification (or other sources).
If you take the URL apart what you see is that it's a request to something called "combo" passing in various querystring keys (note there's no values) that are the paths to some CSS files.
These keys will then be extracted in the standard way given the server side language being used and the CSS for that url parsed into a variable before being returned in its entirety to the response.
For their yui project, yahoo development have a project called yuiloader. While designed primarily for yui, the code seems like it can be set up to serve other files as well. This does more than COMBO. it also works out dependancies. with JS and CSS.
As Yahoo is the Y in YUI, this is probably their code base for mail.yimg.com.
The code can be found on https://github.com/yui/phploader.
I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)
I receive HTML pages from our creative team, and then use those to build aspx pages. One challenge I frequently face is getting the HTML I spit out to match theirs exactly. I almost always end up screwing up the nesting of <div>s between my page and the master pages.
Does anyone know of a tool that will help in this situation -- something that will compare 2 pages and output the structural differences? I can't use a standard diff tool, because IDs change from what I receive from creative, text replaces lorem ipsum, etc..
You can use HTMLTidy to convert the HTML to well-formed XML so you can use XML Diff, as Gulzar suggested.
tidy -asxml index.html
If out output XML compliant HTML. Or at least translate your HTML product into XML compliancy, you at least could then XSL your output to remove the content and id tags. Apply the same transformation to their html, and then compare.
I was thinking on lines of XML Diff since HTML can be represented as an XML Document.
The challenge with HTML is that it might not be always well formed. Found one more here showing how to use XMLDiff class.
A copy of my own answer from here.
What about DaisyDiff (Java and PHP vesions available).
Following features are really nice:
Works with badly formed HTML that can be found "in the wild".
The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.
In addition to the default visual diff, HTML source can be diffed coherently.
Provides easy to understand descriptions of the changes.
The default GUI allows easy browsing of the modifications through keyboard shortcuts and links.
winmerge is a good visual diff program