Basically I am currently doing some research, and I am interested to find out how I could render web pages without a browser: I have some algorithms that I would like to run to calculate the visual aspect of each blocks of DOM node(s) for each page.
What you're asking for basically, is a browser rendering engine, otherwise known as a layout engine... For example, Firefox uses the Gecko layout engine to render the pages. Theoretically, you could adopt this engine for whatever project you're working on, saving you a lot of time.
The Gecko engine is used in more projects than just Firefox, and since it's open source, you could easily get the source code and try to throw it in an application.
Wikipedia has a nice list of layout engines, so there are other alternatives to Gecko, like GtkHTML.
Basically, you want to create the data structures a browser internally creates so that it knows how to render the page.
Check out the Firefox source.
I suspect it's rather complex.
Related
I set up a very basic headless browser implementation with Puppeteer on a server, and the way I have it configured currently, I have the system scrape arbitrary websites based on user input. I then have the server send the html code of the page to a client using response.write. (I'm not actually deploying this as a solution to anything - it's really just a proof of concept.)
The results are mixed based on what website the system attempts to scrape from - but one thing they all have in common is that things like links and external stylesheets either work sporadically or not at all. My question is, is there a way to view the entire website, with clickable links and all, using Puppeteer? Or is this ridiculously impractical and totally hopeless?
If there is a way to approach this, some example code would be great.
Thanks!
For example, we have a cool styled website, can we use developer options(f12) from browser to snatch this?
Ignoring any legal / copyright implications, you can grab the client-side code this way, yes. All HTML, CSS, JavaScript and imagery can be seen through the F12 Developer Tools.
However, there is no way to know what server-side code a website is using (outside of the server owner themselves configuring something incorrectly and thereby exposing that information).
The answer from Obsidian Age is a good one. I'm going to add some more information that may be useful to you.
I've used this technique myself of getting source code via the developer window. Usually I want to find out how they did some neat CSS or JS trick so that I can try it in my own apps.
The files that make up a website such as HTML, JavaScript, and CSS you can find in the Network tab and can easily copy these.
However you should know the JS, CSS, and even (sometimes to a degree) the HTML files have been minimized and are typically missing any comments from the original developers. Chrome has a nice feature that will un-compress JS files and you can even set break points and step through the JS code.
I am writing a project using polymer. Right now, if a browser doesn't support it most of the page is just blank. Is there a way to quickly if the users browser supports polymer and if not, prompt them to use a modern browser?
You can use the page http://caniuse.com/ and ask for the technology that is being used in the framework you want to implement, Shadow dom and Custom elements in this case I think that are the main things that polymer uses and that don't allow this framework to be used all over the place in any browser
I know that Apple products like the iPad or the iPhone have trouble with flash apps.
What web development tools should I use in order to avoid compatibility issues when creating a website? My only constraint is that the languages must provide for interactivity and animation - such as in jQuery.
HTML, CSS, and PHP are a few that I can think of that will behave on 99% of all internet enabled devices.
What tools & languages are available to use when creating a website intended to be viewed on any device's internet "explorer"?
Should I just stick to HTML, CSS, & PHP? I want a certain level of interactivity so that, for example, a user can hover over images and have pop-ups containing data to appear... or when an object is clicked, an action can happen without a page reload.
Can someone point me in the right direction and help me develop a list of languages that are all-device friendly?
I am familiar with programming in several web-focused languages, I'm just wondering which ones to stay away from. Certain ones will limit the devices that can view the site and besides that constraint, the site needs to be interactive and animated.
HTML, CSS, PHP, JQUERY are truly your best bet for developing for a wide range of devices. If the scope of devices is the main goal I would stay away from using HTML5 and CSS3. You still may run into problems using much jquery with IE7 below. Mobile browsers on the other hand are much more advanced or up to date with standards then desktop browsers. I would suggest creating two versions of your application. One dedicated to running on mobile devices and one for desktop browsers. It is a shame apple wouldn't support flash applications. If all you need is hoovers for interaction you won't even need jquery / but for the other it will be useful.
The "Web" is a name for the concept of having interlinked documents accessible over the internet. Therefore, to have a website you really only need a document able to link to other documents, namely HTML.
HTML is not really a programming language or a tool though, it is a document format.
If you want to make a website you need use HTML to Markup what you're writing. Then you use CSS to format different sections of the document you marked up.
PHP though, is completely separate from this, PHP is for creating dynamic HTML, or any document on the server side.
If you want to achieve a flash-effect on a site you use Javascript to modify the page content (HTML) and appearance (CSS).
If you need to learn HTML/CSS I would highly recommend http://htmldog.com/
As per the question, HTML CSS and Javascript are pretty much the only mobile-browser compatible method for website content as they don't need plugins.
What exactly are you trying to do?
I would like to use this JS plugin to use the CSS template layout :
http://code.google.com/p/css-template-layout/
But I know that it is recommended to first have a website working without JS. So, my project consist in doing a tourism website...will I lose a lot of 'potential user' if JS is required to visit my website ?
Tkx,
About 4% of my visitors don't have javascript support includes bots though, that would explain quite a few percent. There are a few classes of browser that won't run your javascript as intended:
Screen readers/accessible browsers (like for blind people)
Mobile browsers
Console-based browsers (Used sometimes by sysadmins from servers with no gui installed)
Off-brand browsers or older browsers with buggy javascript engines
Search Engines (Google)
I don't think that many people just turn javascript off anymore. However, things like NoScript --where javascript is disabled for a site initially and must be explicitly enabled-- are becoming more popular.
The problem is more apparent on mobile browsers, but you will likely serve different content to them anyway.