We use Polymer to build a local app. Each Polymer element has a .html and .css (compiled from .scss) file.
Does the use of vulcanize (it concatenates the JS and Polymer elements into one file) provide an advantage? Does the use of some minify tool after vulcanize provide any advantage?
Once again, it is a local (only) app so I mostly care about performance and speed.
From Concatenating Web Components With Vulcanize.
The short answer is “don’t guess it, test it”. There is always a
trade-off when it comes to concatenation but tools like WebPageTest
can be useful for determining what your true bottlenecks are.
You can use chrome browser developer tools (acess via menu) and compare application load speed for plain, vulcanized, minified versions or combinations of them.
Then decide which bests suits your needs.
Related
We have main big application and are going to create separate small applications (microservices) using different libraries (Angular, React etc.) and compile them into webcomponent to use them anywhere. The main application has some libraries (example underscore.js), some of our components use the same libraries (example lodash.js), in this scenario we see a lot of conflicts when using webcomponents inside main application. Do you have any ideas on how can we isolate webcomponent libraries and they can work in isolated mode. Also we have used ShadowDOM, but no luck.
There's no such isolated mode shipped with the Web Components technologies. All imported libraries will share the same namespace.
Shadow DOM is not about Javascript code isolation but only deals with DOM et CSS isolations.
If you want to resolve conflicts with imported 3rd-party libraries you could either:
Design your website to import 3rd-party import only once, in a global dependency script.
Use a module loader that will manage library loading for you, for example require.js, or the built-in feature ES6 module import feature, or even your own Vanilla module loader.
Isolate the different parts of you site with <iframe>elements (if possible, but you may loose some interaction features).
All these solutations have advantages and drawbacks. It depends on your needs.
I started to use web components from bower recently in my applications. I am trying to tweak a small logic in a particular web component. I want to know is there a way we can change the js logic specific to a component in my local js file instead of forking a repository and try to do it.
Thanks in advance.
For quick hacks you can go to bower_components and experiment. For persistent changes you will need a fork.
Of course you could try monkey-patching by replacing methods/functions but it's ugly and brittle in case the dependency library changes.
When looking up Electron and Offline HTML5, I have found it difficult to make a decision between which one to use for a project.
Assuming that a user will have to go to a certain website to download the Electron application, and would have to go to the same website to get the Offline HTML5 loaded, what are the pros and cons between using one over the other?
Some that I could think of:
Offline HTML5 can be updated without the user consciously updating their application by just making the user go to the online page again.
Electron would eliminate the need to code around multiple browser/browser version dependencies and quirks
It really depends on your exact requirements. The following is a list of everything that I came up with:
electron supports module system (i.e. require) both in main and renderer processes.
electron provides you access to OS APIs (e.g. fs). Without such many node modules will not work in the JS runtime of the browser (e.g. ip).
updating your app with electron is as easy as sending an http request. (or even better as described here)
an HTML 5 offline app requires a browser and the user might just give it IE6.
electron integrates with native desktop environment (see dialog, power-save-blocker, shell or even app for some examples)
electron enhances some of HTML5 APIs such as file API
electron lets you modify the default behavior of underlying chromium. For example you could intercept all URLs with file scheme and modify them on the fly*.
In short if you want your app to have a good native integration and act deterministic (i.e. no browser quirks) I suggest choosing electron.
*electron-jade for example takes use of protocol API to compile all files ending with .jade on the fly without the need to prior compilation.
DISCLAIMER: I am the developer of electron-jade.
I just discovered the beautiful Haml and Sass, and want to develop in these languages but with live previews. Coda and Espresso both allow for beautiful live previews of HTML files, but previews of an Haml file simply show it as plain text.
While there exist sugars for Espresso that add syntax highlighting, which is nice, I would like something that automatically compiles Haml files to HTML, and then lets me preview that instead of Haml.
Does anything like this exist for either Coda, or Espresso, or for any other web development tool out there?
(If it makes a difference, I'm not developing for Ruby on Rails, I'm making a static website, so the Ruby on Rails plugin shouldn't help AFAIK.
Software I tried out were StaticMatic and Middleman. StaticMatic's development seems discontinued, and for some reason MiddleMan refuses to work after creating my initial directory structure. Maybe I'm using it wrong.)
I don't use Espresso, so no comment there. However, Coda does not provide any support for Haml or Sass that I can find. I've been closely following the Coda forums, as I am a paid user, and it looks as though a 2.0 version is forthcoming. Who knows, perhaps that'll be included.
For now, since you're not using Ruby on Rails, I might suggest TextMate. It doesn't do Haml or Sass "right out of the box", but it can be configured to do so using "Bundles."
Installing HAML bundle for TextMate is a primer on how to setup TextMate for Haml/Sass, and I suspect there are others.
That said, for roughly the cost of TextMate you can purchase RubyMine ($69), which does both Haml (via RubyGem) and Sass (via Plugin), and can also handle running Sass --watch internally. I know you're not using Ruby, so maybe the idea of using a tool made primarily for Ruby doesn't appeal, but it does work in both the Haml and Sass environments very nicely.
The third option would be BBEdit, which can also handle both Haml and Sass. Some information on the plugin for BBEdit is in BBEdit-Codeless-Language-Module-for-HAML-SASS.
I hope this helps.
P.S.: I'm a paid user on all the platforms I mentioned. While I use RubyMine as my primary tool, I find that TextMate still gets a lot of use when I'm programming and need a quick, friendly window to examine code in. I used to use BBEdit when I needed to do complex regular expression-style search and replacements, but then I discovered how to do the same thing in TextMate, so BBEdit is sort of collecting dust. Coda? It looks pretty, but doesn't get the job done so much any more (though Panic's Transmit is still very much a core application).
There are two plugins for Coda 2 that I am aware of:
Coda-Sass-Plug-in is available from GitHub and allows you to save out your scss files to css. I worked for me though I wasn't completely happy with needing to refresh multiple tabs all the time.
LessCSS is available from incident57 dot com. Although I was never able to make it work, it lead me to CodeKit (CodeKit has been mothballed due to production of CodeKit).
CodeKit has the ability to watch folders and generate css files from sass or less when they are saved. It also has the ability to handle Stylus, Haml, Javascript, CoffeeScript, Jade, Slim and Kit.
OK, for anyone else looking for an answer to this, I decided to go along with a different solution. I'm using my normal editors, along with 'serve', a Ruby gem that runs a web server using WEBrick, and automatically compiles any files which it detects has changed. This includes HAML, Sass, Slim, Markdown, etc. files. I'm going to be using either Coda's live preview, or the minimalist browser called Playground, which eliminates the need to press refresh when the local file it is displaying changes.
This workflow is nice for now, although it doesn't have any built-in method to build the entire site into a static site when I'm done and want to deploy. This is a feature in middleman, but middleman still refuses to run because a dependency of it, thin, refuses to work on 64 bits. I might have to manually compile all the files using the terminal command, and hope the Haml interpreter can handle combining template files with each file, which I seriously doubt at this stage. This limitation and thus the continued dependence on 'serve' might force me to consider one of the other applications out there, listed on the page Haml Sucks for Content.
We're not doing real web development. We get our HTMLs from our designers, and have our web app generate those HTMLs (with some specific content). Simply put, we don't use any major web development infrastructure (ASP, PHP, JSP etc). Having that said, we sometimes do need to edit HTML, JavaScript and CSS files, and I'm tired of using rocks and stones and having no proper backup. What I'm looking for is a rather simple editor that would handle those kinds of files, and most importantly - will support source control, and will be free (or very cheep).
I've been looking into Aptana, and it seems to be a bit of an overkill. It has a lot of features we can do without, and this makes it too heavy. VWD express is lighter, but has no source control integration. There are probably a million other HTML editors, but I couldn't find one that satisfies the basic requirements - relatively lightweight, supports source control and is (almost) free. Any suggestions?
Not exactly what you want but you could try and use Notepad++ combined with TortoiseSVN.
Eclipse is pretty good. It's also very popular among developers and can edit HTML.
Why is supporting source control a requirement? I find that the place for good source control is not in the editor. The editor just gets in the way and only implements a subset of functionality.
NetBeans can edit about anything, is free, cross-platform, and directly supports CVS, Subversion and Mercurial version control systems. It's not exactly lightweight, although it is lighter than any comparably featured competitors I'm aware of.
Pick your poison at Wikipedia's Comparison of HTML editors page.
The Revisionator is a cloud based html editor that has built in source control. It'll even do wysiwyg diffing and merging of different versions.