In Google Chrome there are already sourcemaps for JS and CSS, CoffeeScript etc., and Paul Irish just demostrated SASS using sourcemaps.
It is a a technique to map development source files to the compiled results in the browser to allow navigating back to the source.
So, is there sourcemaps for HTML now? Languages like Jade, Slim really want such features so that people may debug them more easily.
Sourcemaps, ready to use for HTML today no. This is also something very complex to implement.
This can change in future. If this response was marked as correct, and someone knows after some time that my answer is not more true, please comment below I'm wrong.
It is dead simnple to generate sourcemaps in a generic way like for css, but there is no browser support for it.
Some editors have plugins to support this. But be aware: this works best for static pages. (pug/jade, ... - using this at our place with nodejs+gulp)
Related
I'm writing a single-page app in Rust and bundling it with rollup, which works great.
The problem is that currently I need to enable unsafe-eval for script-src for my WASM to be loaded on chromium and webkit-based browsers (not Firefox for some reason).
I plan to ship my app in two different forms:
A native wrapper using the excellent web-view, where the bundled JS is inlined into the HTML and the resulting fat HTML file is embedded into the wrapper binary (I'd say in this case enabling unsafe-eval and/or unsafe-inline is less of an issue because if something can inject code into my native wrapper the user is screwed anyway)
A static website hosted on Github pages or Netlify where the JS, WASM and CSS aren't inlined (I'd say traditional XSS is more of of a potential issue here)
The best solution I can come up with is to hash all the {JS, WASM, CSS} files that rollup outputs at bundle time, and then inject the hashes into the HTML's Content-Security-Policy meta tag.
My question is, is there a way to do what I described that doesn't require me to write a rollup plugin?
I've tried searching on Github, Duckduckgo and NPM but found nothing of interest, so if anyone has a way to do the above (or a better solution for this issue) it'd be greatly appreciated.
Does PhpStorm has a functionality to make code hard to read by making it one big mess?
I have HTML & JavaScript project which has lot's of code ready to be put in production use. I want to make it harder to read if someone is searching source code. I know there is pretty print features in browser to overcome this but still...
PHPStorm doesn't have any built-in functions for this. You might want to checkout phpprotector or YUI Compressor
I just started looking into sass and compass because I see a lot of code on codepen that uses it. I noticed in the documentation that you had to have something like a sass folder and it watches for changes in that folder and when a save event occurs it updates the stylesheet folder with the regular css. I'm used to writing my css, especially when I go through short tutorials or for practice in the style tag in the html file. Is it possible to write my sass in the HTML file? Do I have to now write my css in a different file? if not how would I do it?
No, you cannot to my knowledge. See Using SASS/SCSS syntax inside <style> tag.
The real question, though, is why would you want to use SASS at all? Some say it promotes and encourages poor CSS programming practice. The "features" it offers are in general of marginal usefulness. It adds another step to your workflow, and before you know it you will be fighting with gruntfiles and SASS versions and having Ruby installed properly. Personally I would also strongly advise against deciding to start using some CSS framework if it brings along the SASS/SCSS/LESS baggage.
Some preprocessors that we use in JS/HTML/CSS do have versions which can run in the browser, for development purposes. For example, you can run babel in the browser to convert ES6 to ES5. That is possibly because babel is written in JS, and it's not that hard to create a version which runs in the browser and does the transpiling on the fly. Or, to take one other example, you can arrange for Ember to compile templates from within the HTML. SASS, on the other hand, is not written in JS and there is no reasonable way to call it from the browser.
I'm using Phonegap to build an iPad app.
The app is supposed to be offline (aside of form submission), so it will have mostly static pages, so I'm going to have lots of HTML files, since I am not using JS MVC / Require JS to minimize the complexity. The more I see it, it's basically a static site wrapped in Phonegap to build an app.
Since I'm gonna have lots and lots of HTML files, it will be a pain to manage changes in (for example) header/footer if I'm not using any templating engine. So far, I'm using Codekit to compile Jade files to HTML, and it works out fine, I'm only using Jade for the layout/block/include feature and HTML compilation.
The one thing I don't quite like of using Jade is if your file has lots of nested HTML tags (for example a complicated form design marked up with Zurb Foundation/Twitter Bootstrap), then suddenly Jade isn't looking so clean anymore.
Somehow I think there has to be a better way to do it, though. Has any of you done a mostly static pages app with Phonegap? Any better suggestion?
Thanks
you can use 1 file for all, save the data in sqlite or as variables in JS files.
the code should be like this:
<!doctype html>
<html>
<head></head>
<body>
<div id="page1" class="page">...</div>
<div id="page2" class="page">...</div>
<div id="page3" class="page">...</div>
<div id="page4" class="page">...</div>
</body>
</html>
then you can create a function "navigate(page_id)" in the js file:
public function navigate(pageid){
$('page').hide();
if(pageid == 'page1'){
$('#'+pageid).show();
// get data and append it in the div.
}
...
}
for sure you can use Jquery Mobile, but it will force you to use a pre-defined template, Personally i don't use it because writing my own template is much better and may give more options.
I use a very standard workflow that is catching huge popularity in web development - Grunt. Grunt does tasks very similar to how Codekit compiles jade, only that Grunt is very stable, has a huge community and supports jade by installing grunt-contrib-jade. It'd integrate with several templating engines.
Grunt might seem to have a learning curve in beginning, however it is a great alternative, open-source and free to use.
Grunt website: http://gruntjs.com/
I would suggest this framework. It's so easy to achieve page navigation, and you don't need to put all your pages into one file, that will make it very hard to read or maintain. This framework allows you separate any of your files(html, js, css) into very small ones so that each file is easy to read and maintain.
It also uses Ajax to get html(pages/partial views), so you can do what you like to with the html.
Our phonegap team have finished some projects based on this framework, and it's very successful. There are demos with source code on that site, which would help you setup your project. You can take a glance at the files structure through the source code.
I would NOT advise jQueryMobile as it's really a pain for phonegap apps. Here are some posts what explain why:
How jQuery Mobile Eats PhoneGap Performance, See Experiment
Who Is Murdering PhoneGap? It's jQuery Mobile
I'm using JQuery mobile successfully. I use RazorEngine as a template service and them compile the files down to static html. Jquery Mobile has a nice paging engine that uses ajax to fetch the static html files and then show those on the page, along with a lot of other nice mobile specific features.
In your post you mentioned you did not use an mvc framework. However I would advise you to look into backbone.js. Backbone is a technology that is often being used in combination with Phonegap. You could use Backbones views to organize your code.
Imagine a site made of just of HTML + SASS files, but displaying in a browser just like HTML + CSS. Essentially, skipping the step of compiling the SASS to CSS first. Is there any (even fringe) project that enables this?
No, but there is work being done to move ideas from Sass/Less into standardized CSS. Contrary to the comments above, there are very good reasons to do the calculation on the client side. Browsers would be able to access the actual DOM, to do more informed calculations. Need to add percentages to pixels? Pre-processors can't do that, but a browser could.
In fact, that's the reason you don't want Sass to be implemented in a browser directly. Sass is awesome, but if browsers are implementing similar features, they should take those ideas even further by integrating with the DOM. That's happening now with variables and simple calculations. Can't wait for more!