I got a project to work on that includes a lot of unwanted CSS within a stylesheet.
I used a few tools like "Audits" (Chrome), "CSS Usage" (FireFox) and "Uncss" Nodejs npm package.
They all output unused CSS for the current page that is refreshed or mentioned in CLI (uncss looks like this: uncss https://example.com > style.css)
I have thought of getting this by template - but the website I am working doesn't have any CMS and templates organized like Wordpress - it is built with Zend MVC Framework and there is no specific organized "templates".
What is the easiest way to clear unused CSS from all of my website in a more efficient way?
I am working on a tool, https://www.bleachcss.com/, that detect unused CSS based on user actions.
Thanks to a little snippet of JavaScript, the tools detect use CSS selector when your user interact with the page and then send a report back to our server.
We then aggregate all the reports sent by all your users, and then we create pull request automatically to remove the unused CSS from the code.
By using real user actions, we are sure to support any kind of website, even pure JavaScript applications. Moreover, we are not slowing down your build system by adding headless browser runs or static analysis into it.
We are still in beta right now but I would love to learn more about your app, so please contact us if you are interested in giving it a spin!
Related
I am developing an admin dashboard where I want to have a files navigation system that shall be always available from the main admin area and stay independently loaded from the main admin area.
What's the problem?
While interacting with the dashboard, since the approach is SSR with PHP, the user will be executing page requests to update a post, go to a different view, etc. So the files navigation area will have to be reloaded on every request and I don't want that, since the backend PHP will have to fetch all files and build the files tree over and over again for each request.
I though about doing the following:
The wrapper page (admin dashboard) contains two iframes in a split viewport:
iframe MAIN
iframe FILE-NAVIGATOR
The user can use and navigate on each side of the viewport without affecting the other area.
For example, navigate through files and folders without moving away from an open editor on the main iframe.
Or save the editor contents and go do something else without having to constantly refresh and re-render the files navigation area.
Both iframe contents will be hosted under the same domain, so communication between them won't be an issue.
I want to go the SSR route via PHP, since this project does not deserve the effort of building a modern SPA and I need to reuse a lot of already existing PHP code.
But still, I want to do it as good as possible.
So the question is:
Do you know if there is a cleaner/better way to achieve this, better than iframes?
I am a bit worried about all browsers supporting iframes since it's in fact an old thing.
I think your best bet would be to go with a single page application; like React or Angular. This would somehow force you to build your backend system as an API server and letting most of the heavy UI lifting to JavaScript running in the client.
Some time ago I started working on a side project that would be an Amazon S3 Browser. The application runs in the browser, the main entrypoint is here but you'd be interested in looking at the Browser part itself.
You'll notice the BucketBrowser component accessible here is composed of 2 parts: the BucketList and the BucketContent, similarly to what you want to achieve.
The main advantage of working it as React (or Angular) and a neat Backend API is the separation of concerns and the opportunity to create also a Mobile or native client for other platforms that would leverage your Backend API.
I'm not a React expert, the links I've shared are part of an experiment not ready for production usage; but will help you visualize how you could achieve your idea by leveraging React.
Use SingleSPA https://single-spa.js.org/ framework and create Container app using React. Then keep your PhP code as it is and display it as child page inside Container app page. All new modules you can create as separate module. It is kind of FE microservices. We tried it using React and Vue js but I am sure it will work for PHP too.
You can open your admin releated stuff on own workspace = virtual desktop
Thats supported on Linux, on Window and perhaps on other OS too
The follow some hints how to to some thing on Linux:
Check how many workspaces are configured on your system:
wmctrl -d
You can set a different count of workspaces if you like:
wmctrl -d | wc -l
# or on follow way:
wmctrl -n 1
Open a program in foreground on current active workspace and move to 2`nd workspace:
wmctrl -s 1 ; xed & sleep 3; wmctrl -s 0;
Open a program in background on current active workspace and move to what ever your prefered workspace is:
Thats possible too.
You can display what you want on your background picture of your screen:
on Linux systems you can use p.e. Conky
Conky: http://conky.sourceforge.net/
Conky-Optionen: http://conky.sourceforge.net/config_settings.html
Conky-Variablen: http://conky.sourceforge.net/variables.html
Conky-colors: http://helmuthdu.deviantart.com/art/CONKY-COLORS-244793180?
Wettercodes: http://edg3.co.uk/snippets/weather-location-codes/germany/
https://www.linuxmintusers.de/index.php?topic=33952.0
https://www.linuxmintusers.de/index.php?topic=11139.0
on Windows systems, you can use p.e. bginfo
It can be they are like this on other OS too.
I can't seem to get my ASP.net webforms site to cache CSS files. In IIS I configure Output Caching following the instructions at the link below. But when I monitor Network activity in F12 tools, there is no sign of caching.
Is there something simple I am missing ?
Link to instructions on configuring Output Cache in IIS
After examining Network activity some more, I noticed a lot of Result values of '403'. I am using JQuery UI libraries and the standard JQuery CSS base file was trying to import all known JQuery UI CSS files (i.e accordion, date picker). I didn't have these in my project. After removing unused imports, I no longer have any '403' results. And also that fixed the caching problem. The CSS files are now being cached.
PLATFORM
* Asp.net Webforms - C#
* .Net 4.5
* Azure Web Hosting
* Chrome (43.0.2357.134 m) - Latest
PROBLEM
I am currently bundling CSS and Javascript using the ASP.NET Web Optimization Framework. When testing in my local environment, all is working great. You can clearly see that the aspx page is relatively small and the bundles are listed as separate individual files (cssAll & jsAll).
https://www.dropbox.com/s/dazt681qylk41hm/local-login-cache.PNG?dl=0
Once I deploy to Azure, the Javascript bundle does remain correctly linked and is cached, but the CSS bundle is no longer referenced. Instead, all CSS code is written directly into the head tag of the aspx file. This causes the aspx file to grow exponentially (from 5KB to 87KB) and it prevents the CSS from being cached. Interestingly, when I disable cache, the CSS file is now sent as a seperate file, and my aspx returns to its smaller size.
https://www.dropbox.com/s/eox7b0vc0mi27wo/azure-login-combined.PNG?dl=0
MY THOUGHTS & QUESTIONS
Is this normal behavior? Am I simply misunderstanding or misusing Chromes developer tools and/or the way CSS caching works?
If this is normal behavior, then why does my local environment respond differently to the Azure hosted environment?
If this is NOT normal behavior, then where could the issue be? (Please read considerations below to see what I have already tried or troubleshooted)
CONSIDERATIONS
I have confirmed that all CSS, Javascript, and relevant directory structures are identical between my local machine and Azure. (Web deploy handled this well)
I have tried the exact same tests with IE11 and Firefox, getting similar results. If caching is disabled, the CSS comes seperately as intended, but if caching is enabled, then CSS is verbosely written into head tag of aspx page.
Problem is not with Bundling because it is working. However, I have tried linking to each CSS file directly, rather than using the bundle, and the same oddity occurs.
I have completely cleared browser cache (using the clear browsing history in chrome) between tests and have used multiple computers to test this, yet the results are the same.
The page I am illustrating is very small, but other larger pages fair worse and can grow upwards of 600KB, due to this oddity.
The odd bundling behavior was finally resolved!
My local project was set to use "https" by default. However, when browsing my production site on Azure, I noticed it was using standard "http". Once I enforced all pages to be routed through "https" in Azure, my CSS was now properly bundled, linked and cached.
- As a disclaimer, I honestly have no idea why this works, but it clearly is a fix for my particular problem. If anyone can explain the "why", please feel free to do so.
I've found that some of my ASP.Net web apps prompt the browser to load plugins that I'm not explicitely using and certainly haven't deliberately referenced in the project settings.
Two that come to mind are for MS MediaPlayer and the "SVG Viewer for Netscape".
The only commonality I've determined so far is that the two sites/apps affected both use Master pages (nested in some cases).
We don't use SVG file types (just the normal mix of jpg/gif/png) and no video/audio (not yet anyway).
Can anyone provide a hint as to where the references for these might be creeping in? e.g. Is it a server-level include? Or a .Net runtime default when using master pages?
Does anyone else even experience this, or is it just me?
No urgency, I'd just like to remove it if possible.
Thanks.
Al
If you look at the page source in your browser, you should see what's in the page that requires a plugin. If you load external Javascript, you will have to look at that too. Do you have ads on the site that include 3rd party code?
I work for a college and our main website has an ASP.NET based course information search which I created. This has become popular and our company facing website (training for companies) has asked for the same system on their website. I'm not involved in the day to day of either website but know theirs was made using Wordpress. Is it going to be possible for me to embed some ASP.NET code within some of the pages? Any articles on doing this?
EDIT:
The ASP.NET code that would appear in the actual Markup is minimal it's mainly a few asp:Literals I did this on purpose to hide most of it from the website developer to save myself hassle when something gets deleted by accident.
EDIT2 There was a response to do it as a webservice would this be possible. i.e. as search box on the main page displaying the results underneath.
Since asking this question a long time ago and creating a less than ideal iframe solution I have now found a great wordpress plugin called iframe-less
http://wordpress.org/extend/plugins/iframe-less-plugin/
Basically you give it an URL and it builds the content of that page directly into your wordpress page. So far it seems to work really well.
I have similar needs that the originator of this thread has. I maintain a CRM and corporate site that runs on ASP.NET/SQL along with a separate Wordpress php company blog. After we've been using Wordpress for a year, people here would love to be able to edit static content on our corporate site like we do in Wordpress, so I am looking at possible ASP.NET/Wordpress hybrid set ups.
I am hearing good things about "Phalanger": http://www.php-compiler.net
It is a PHP Language Compiler for the .NET Framework, and you can run PHP code in .NET
It was also great to find out in this thread that you can have PHP and ASP.NET in the same IIS web, its another reasonable sounding solution. If I had any nay reputation (I am new here) I'd give RickNZ a vote.
What you could do is create a web service on your ASP.NET application and then write a Wordpress plugin, that would read that service and display it in wordpress page.
This wasn't ideal but the solution I produced involved using IFrames which are still in the HTML 5 spec (infact they have some new attributes) so I think I am ok. Basically I make a page in wordpress with an IFrame and some javascript on its onload to make the iframe resize automatically based on the content size using the code below (iframe called frame with width 100 percent).
function autoIframe(){
try
{
var page_height = document.getElementById('frame').contentWindow.document.body.scrollHeight;
document.getElementById('frame').height = page_height+60;
}
catch (err)
{
window.status = err.message;
}
}
This code will resize on loading of the first content, if the content changes it will need to be called in someway. My solution was to call the method from the innerpage using parent.autoIFrame() each time a search was done.
p.s. The javascript will only work if the iframe and outer page are from the same domain (No cross site scripting).
Wordpress uses PHP and MySql. I have successfully installed and run it under Windows 2008 with IIS 7. The new CGI stuff in IIS 7 results in pretty good performance, too.
You can of course run a separate but related ASP.NET-based site on the same server.
You can also run a mixed ASP.NET + PHP site. IIS directs incoming requests to a particular HttpHandler based on the extension of the URL, so there's no reason why you can't mix *.php & *.aspx.
In fact, you can also do things like write a .NET-based HttpModule that integrates with a PHP/IIS site, to do things like logging, centralized cookie management, HTTP header "adjusting", etc.
If you want to put ASP.NET controls in a *.php file, that's a different thing entirely. To do that, you would need to write an HttpHandler that understood how to parse such a file. Either that, or just use iframes....
Short answer: no, not easily. Wordpress is PHP - you can't just put some .net code on a PHP page.
Long answer: yes, if... if you are really keen to do this, and it's worth the time and effort, you can work around it by using some of the strategies suggested already, e.g.: host the ASP.NET bit on a windows server (or use mono) and show it inside an iframe on the wordpress page.
Just bare in mind that this is not a common setup, and may be more difficult than simply creating or using some kind of Wordpress plugin.
I am exploring http://sourceforge.net/projects/wordpressnet/ if it helps anyone ...
Also,
http://wpdotnet.com/ (related article : http://www.php-compiler.net/blog/2011/wordpress-on-net-4-0)
http://wordpress.org/support/topic/installing-to-a-net-server
I know it is an old post and I too do not prefer necroposting but
these resources may improve the existing content.
WordPress is a LAMP(Linux Apache MySQL PHP) application, and normally running in Linux servers. I don't think you can integrate ASP.Net to wordpress. But off course you can provide link to ASP.Net application from WordPress.
No, this won't work. You cannot use ASP.NET on pages that are served by WordPress. You can use ASP.NET in the same web site as Wordpress, for example by having certain directories or certain pages serve ASP.NET content, while the rest of the site still serves WordPress content.
However, if the ASP.NET code you wish to use is very simple, why not do it in PHP instead? WordPress uses PHP, which is very similar to ASP.NET.
I can be able to use both Asp.Net and Wordpress on my Host (Dinamo.net.tr)
without using any plugin or iframe.
They can really work together,
you just upload your Asp.Net C# files,
and install Wordpress at the same time.