I am using a Hosted CMS which does not allow server side access. And unless I am mistaken CSS3 Pie requires server side code to work properly. (.htaccess)
Is there a way to use CSS3 Pie (or another similar type of service) without server side access?
There are three ways:
add the mime type using .htaccess
Use the supplied PHP file to add the mimetype
Use pie-js: http://css3pie.com/documentation/pie-js/
As mentioned on their page:
Advantages of the JS version
Since it is a normal .js file, PIE.js does not suffer from some of the
more annoying limitations of the PIE.htc behavior:
You can load PIE.js from a different domain than the HTML page. You
don't have to worry about your server not using the correct
Content-type header for the file. Referencing the PIE.js file via a
relative path is simpler since you only have to do it once in each
HTML page. It is more easily integrated within JavaScript libraries.
Disadvantages of the JS version
Unfortunately there are some significant drawbacks to using PIE.js,
which is why the .htc behavior is still the recommended approach for
most users:
Invoking it requires writing some JavaScript, which means your styling
is scattered between CSS and JS code. The .js file blocks the parsing
of the page while it is loading, whereas the .htc file loads
asynchronously. You have to wait until the page's DOM has completely
loaded before applying PIE.js to elements, whereas the .htc behavior
applies itself while the page is still loading. This means the "flash
of unstyled content" problem is much greater with PIE.js. PIE.js
cannot automatically attach and detach itself from elements which are
dynamically added to/removed from the page's DOM, so you have to write
code to handle that yourself.
Related
In the Create React App documentation inside the Adding Images, Fonts, and Files section, they say :
importing images that
are less than 10,000 bytes returns a data URI instead of a path. This
applies to the following file extensions: bmp, gif, jpg, jpeg, and
png.
The reason for them is :
To reduce the number of requests to the server
But is it specific to how React works (updating the DOM for example) or it's a wide spread practice in web development in order to reduce load times?
This is not a practice that's particular to React. Whether something gets rendered via React or by ordinary HTML, if an image is rendered using a data URI, if the data URI exists in the code already (either bundled inside the JS or hard-coded into the HTML), no additional requests to the server will have to be made.
In contrast, if you have something like src="theImage.png", that'll result in a request to the server to download the image.
it's a wide spread practice in web development in order to reduce load times?
Yes.
If, for example, the web server was using HTTP 1.1, and you had, say, 25 images with srcs pointing to different files, the sheer number of separate requests could present a problem - regardless of whether React was being used or not.
(HTTP/2 mitigates this problem at least somewhat - see here)
I have a universal React application. Within one of the pages I want to include some HTML from another server - Edge side includes (ESI) have been mentioned, but this methodology doesn't seem to be compatible with Universal React applications, as:
we may not be able to recreate the functionality of an Edge side include client side, at least not without revealing the external URL to the browser. I guess we could create a proxy page on our server to do this, and load the html snippet via AJAX when doing this client side, but that still leaves us with the second issue...
Using an ESI means injecting non React DOM content in to the already (server side) rendered DOM of the React application when processing on CDN server. I am pretty sure this would make the data-react-checksum invalid and I can't think of a way to avoid this.
Is there an alternative, React-friendly, universal rendering approach that could be used?
I am creating a single page app (mobile/desktop) using AngularJS. Based on the limited knowledge I have of AngularJS, I think the routing for the apps/websites is based on urls and $location/$location.path directive is used. However, in mobile or desktop apps, there is no browser. So how does AngularJS routing work in this case if views need to be switched?
Thanks
If you are talking about an Angular application by itself, it will always need something to be interpreted by something. Angular is written in JavaScript which means it will have to be interpreted by something which understands JavaScript. I am using the word interpreted instead of compiled, because JavaScript is not a compiled language.
But then how does something that interprets JavaScript display it on my screen you ask? For this you'll need a bit of background information.
The DOM
This is where we got to the Document Object Model DOM. From W3c:
The Document Object Model is a platform- and language-neutral
interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents. The document
can be further processed and the results of that processing can be
incorporated back into the presented page. This is an overview of
DOM-related materials here at W3C and around the web.
To dumb the quote above down:
you have a document (web page) which is being displayed and the DOM allows you to change this document which is being displayed.
JavaScript Engine
The link between JavaScript and the DOM is provided by an Engine. Every browser uses a JavaScript Engine. For example Chrome uses the V8 JavaScript engine. From an introduction of V8:
JavaScript is most commonly used for client-side scripting in a
browser, being used to manipulate Document Object Model (DOM) objects
for example. The DOM is not, however, typically provided by the
JavaScript engine but instead by a browser. The same is true of
V8—Google Chrome provides the DOM. V8 does however provide all the
data types, operators, objects and functions specified in the ECMA
standard.
How does this translate to your question?
Everything that wants to display a JavaScript application, needs to have a JavaScript Engine and a DOM. This could be a browser like Chrome, but could also be any other application.
A simple explanation of what a router does, is change the DOM to display different "documents". So plainly said: any application, be it a mobile or desktop application, which has a DOM understands how to use Angular's routing system.
Outside the browser means only application you are speaking about?. angular is tied to HTML pages in general. So its a framework for managing(not exactly appropriate word) the html pages to make them into Single Page Applications so that browser does not need to reload the entire the web application on request of a single page, it helps to invoke the html pages into the main html pages, this makes the application not to reload the entire, but to make available requested pages. this is where the routing comes.
Angular will work just fine there. In fact there is an Ionic project that is based on top of angular. E.g. if you are using Cordova, then the app is rendered inside a browser (or at least with the browser engine). So as far as I know it will behave exactly the same way with the exception of user not being able to type in URL or click back/forward.
Moreover I build an application for browser where I do not user URL as much as possible. E.g. I transition only between states and don't have direct url's in my application at all. Of course I need to support to the extent that a user can type in the url, but the ui-router does that on it's own if you map routes properly. But it seems much more beneficial not to rely on the urls at all for SPA (for internal stuff as you still have the edit url as I said before).
I have a task where I need to export the html to pdf. Where the pdf should have the same design as it has in browser. Basically I need the css should also work in pdf file. Am using angularjs for front end. But I have not found any use full module or any js library which supports my requirement. I also need to update AngularJS scope variables values in pdf. I found one http://pdfmake.org/#/ but it only supports some predefined css attributes. Please provide some suggestion if there is some npm module or any js library which render the html to pdf with css.
Thank you
I am not sure if there is a fully featured JavaScript solution, which can convert HTML/CSS to PDF on client side. It makes sense to take a look to server-side solutions - there are many available.
In an "hybrid" scenario on client side you'd need to populate a HTML/CSS template with variable values, send the resulting HTML/CSS doc to the server side and to receive back a generated PDF.
In the case it is not important anymore, if the converter is written in JavaScript. You may use a standalone native applications, utilize print/PDF output subsystem of WebKit (i.e. PhantomJS) or it can be, for example, a Java module deployed to your application server (i.e. PD4ML).
I am having an issue where my grunt build file is building correctly, but the website I'm working on is not getting all of the css files. It is only getting the master.css file. I'm using nodejs, with kraken, on top of express. I can't tell if there is some configuration option I need to change, I don't really know where I would do that.
For anyone interested, the issue was with the changing structure of the project. Going from angular to a dustjs w/ backbone combo changes the project form a SPA structure to a multi-page structure. This makes a huge difference because now instead of sending everything at once we are sending pages as they are needed, this also means that when a user switches to a different view, the server will be building an html version of that view and sending it back as fully fleshed out html. When the server builds the page it has access to the file structure, which means that the build folder that was necessary for the angular project, is no longer necessary.