I often have a problem where I'm working on a dynamic web app with tons of front-end or back-end code and there is a CSS problem that just eludes me despite an hour of scratching my head. I know that StackOverflow could solve it in a second, and I'd like to post it, but I either have to
Make the app public along with steps to reproduce the state, or
Tediously copy out the DOM and assets (CSS) along with the current state.
Neither is very straightforward. Note that the DOM is dynamically generated so "View Source" won't cut it. Similarly, the CSS could be spread out across multiple files and I'd like to just grab it all at once.
Is there an easy way to copy out the DOM and all CSS as a single file so that I can insert it into something like JSFiddle and be on my way?
The quickest way to get all HTML on the page as-is is to paste this in the address bar:
javascript:alert(document.body.outerHTML)
You can also use the console, of course, but the above works even in old IE versions and is easier to copy/paste.
I don't think there's a good way to get the CSS at all, but you could try using a jQuery selector or similar to get the URLs:
$('link[type="text/css"]')
.each(function(x, link){
console.log(link.attributes.href.value)});
And downloading and concatenating the CSS.
Related
The end result of what I'm trying to achieve is rather than having a single applications.css file, I want to split it into two sections -- a section I'm going to inline into the <head> tag, and then everything else. The reasoning behind this is that we want to inline the portion of our CSS that applies to above-the-fold elements of the page.
What I'm wondering is if there's a way to leverage the asset pipeline to remove the portion of the CSS that's inlined from the application.css file?
I feel like this is one of those problems where the way I'm thinking about the problem may be the biggest blocker, so totally open to alternative ways to think about this (i.e. not using the asset pipeline).
Just to make the problem more interesting, ideally I'd like a way to do this that's independent of the project itself, because there are multiple Rails front-ends where I'll need to apply this technique.
NOTE: Determining which part of the CSS I want to inline is not the problem -- that I have solved. What I'm looking for is a way to, as we continue to update our CSS in the future, make generating the two parts of the CSS a simple rake task, or integrated into the asset pipeline so it's done on deploy, etc.
Seems like the most straightforward way of doing this, if we assume that the asset pipeline (a.k.a. sprockets) is the right approach, is extending sprockets via an exporter -- the thing that actually writes assets to disk.
Update: I've instead looked at css-purge as an off-the-shelf solution for identifying which CSS is used on a given page. Having this as a separate tool that doesn't care that a given page was generated via a Rails app helps make it more useful.
i have made a webpage and now it is "feature-complete".
As a next step i want to put some style to it.
The project is based on the Play framework and i choose SCSS as my CSS alternative (with an SBT plugin to convert SCSS -> CSS).
Every time i change some CSS i have to reload the page in the browser, which takes a while, see if i like it and keep or revert. Then start over.
This workflow does not seem right to me. How do you style a webpage built with Play (specifically: i use Play templates, so i cannot just copy every piece of HTML into a CSS editor and style everything from there)?
The best way that i found is to change the CSS directly in Chrome, remember the changes and apply them to the source file later on.
Is there a more "automatic" way of doing things? Any nice editors or browser plugins that change the source file directly? What am i missing?
What are other people, using Play framework (or other templating systems) doing?
Thank you!
Maybe you can download an extension that automatically refresh's your page every ... seconds. On this way you only have to "Alt-tab" between your code and your page.
BTW: I couldn't comment this, I need 50 reputation. Otherwise I wouldn't have commented it because this isn't really an answer but this is just my advice.
I was wondering if you can give me any pointers on how to write a firefox plugin/add-on, that would change the layout of the page one is on, based on a pre- written CSS file.
It's meant as a prototype and what I want to be able to do initially is to make my browser automatically change the background color of certain div's, when I navigate to the chosen page. I'm only trying to make it work for a couple of sites.
I speak python, javascript/jquery, css, html ..
You may be able to accomplish your goal using the Stylish addon without writing your own. This basically allow you to attach custom CSS overrides based on a URL pattern.
If you want to do this and write your own extension, you could use the addon-sdk and make use of page-mod. Here is a tutorial that will help you with running the script only on the URL's you specify. As of FireFox 34 you should be able to attach actual CSS files instead of having to rely on JavaScript. Learning the addon-sdk it a lot less intimidating than making an old style / low-level extension and should be sufficient for your needs.
There are a few different ways to accomplish similar things, so you will need to experiment based on your needs.
I'm new to and am loving Meteor. But, of course, every framework with nice features has flaws. For Meteor, it seems like the flaw is the amount of client-side scripts that have to be loaded to get an app rolling. Because of this, a relatively empty meteor app can take a bit longer to actually render anything than I'd like. I feel like it makes the site seem like it's broken for the first 6 seconds.
I know I could remove dependencies to save some time. I'm sure things are a bit better compressed outside of production mode as well, but in case this doesn't help when my app is finished, I'd like to be able to give the user some indication that the page is working.
One way I thought of doing this would be to add a background style while the scripts are loading. The problem with this seems to be that anything you add to a head tag in meteor gets loaded after the 20 or so scripts.
Is there any way to put style tags above Meteor's script tags and have styles render before scripts load and start processing?
It appears that by adding css files to the "client" directory and leaving their link tags out of the head tag completely, the stylesheets load before the scripts, solving my problem.
Let that be a lesson to me.
I just worked out, by trial-and-error, that IE 7 has an upper limit of 32 stylesheet includes (i.e. tags).
I'm working on the front-end of a very large website, in which we wish to break our CSS into as many separate files as we wish, since this makes developing and debugging much easier.
Performance isn't a concern, as we do compress all these files into a single package prior to deployment.
The problem is on the development side. How can we work with more than 32 stylesheets if IE 7 has an upper limit of 32?
Is there any means of hacking around this?
I'm trying to come up with solutions, but it seems that even if I loaded the stylesheets via Ajax, I'd still be writing out tags, which would still count towards the 32-stylesheet limit.
Is this the case? Am I stuck with the 32-file limit or is there a way around it?
NOTE: I'm asking for a client-side solution to this. Obviousy a server-side solution isn't necessary as we already have a compression system in place. I just don't want to have to do a re-compress every time I make one little CSS change that I want to test.
Don't support IE7.
To avoid confusion: I'm not seriously suggesting this as a real solution.
Create CSS files on the server side and merge all files that are needed for this certain page.
If you are using Apache or Lighttp consider using mod_concat
Write your stylesheet into an existing style block with JavaScript using the cssText property, like this:
document.styleSheets[0].cssText += ourCss;
More info here:
https://bushrobot.blogspot.com/2012/06/getting-around-31-stylesheet-limit-in.html
At my last company we solved this by mashing all the CSS into one big document and inserting a URL in the web page that referenced that one-shot document. This was all done on-the-fly, just before returning the page to the client (we had a bunch of stuff going on behind the scenes that generated dynamic CSS).
You might be able to get your web server to do something similar, depending on your setup, otherwise it sounds like you're stuck with only 32 files.
Or you could just not support IE7 ;)