How can i backtrace my modernizr to find what all the custom download includes? - modernizr

I have 2 programs that require the 'modernizr' base plugin.
The first plugin includes: modernizr.custom.17475.js
The second plugin includes: modernizr.custom.87626.js
they are the minified versions and i cant figure out what all they include because i dont want to load the same features twice on my site.
How can i backtrace these to get a list of what they include?

Most of the time the minified builds include the custom url that created the build (eg, something like http://modernizr.com/download/#-csstransforms-csstransitions-touch-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load). Each one of the words between the -'s is a separate test.
If that was stripped, you could just run each script in the browser, then compare the Modernizr objects that are created.

Related

Angular Dart - Using sass files

I am trying to set up sass with Angular Dart but I'm a bit lost and couldn't find a documentation past 2016 (a good one)
I currently have the following structure:
However I cannot reference a main.css file as it is not found and if in a component I put something like this
styleUrls: ['lib/assets/sass/main.scss']
The webdev serve command fails
My pubscpec is
dependencies:
angular: ^5.0.0
angular_components: ^0.9.0
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
sass_builder: ^2.1.1
build_runner: ^0.10.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
mockito: ^3.0.0
test: ^1.3.2
I cannot figure out what's wrong and also the structure I should use
Should I put in my top component main.scss (or the compiler main.css) and do not set any other file reference or should I include it at every component? And also how can I generate this compiled file when I run webdev serve
Thanks,
Alexi
So the references for styleUrls should always be the compiled css not the Sass file. Also the Urls need to be either relative to the file, or package format. So either 'main.css' or 'package:your_project/assets/sass/main.css'
I would also suggest not having separate asset directories. I tend to find having the sass file next to the component to be easier to maintain.
AngularDart also has style encapsulation by default; meaning CSS won't leak outside of the Components by default. Given this I find it better to have the CSS local to that component and be next to that component. You'll find that is the pattern on the angular components, and gallery.
One small note on the components, and gallery. They use the pattern style.scss.css instead of style.css which breaks the convention of Sass. The reasoning behind it is so that we can quickly tell what the source of the CSS file was. Was it written by hand, or did it come from Sass. This is achieved by having different settings in the build.yaml file. I don't think you should do this for your project tho.

ctags and ruby modules in vim

I'm using ripper tags (https://github.com/tmm1/ripper-tags) to generate ctags files for a ruby project.
My goals is, in vim, to be able to jump from a line such as:
::Api::Contracts::Creator.new(
To the relevant file which defines that module.
This configuration works fine if there is only one module called Creator. But in practice there will be many Creators in different namespaces, e.g there will also be an ::Api::Users::Creator.
The above configuration will just jump to the first definition of Creator rather than the specific Creator in question.
Is there anyway to configure ctags so that it will jump to the specific definition?
ripper-tags needs to be run with the option
--extra=1
So that tags will be generated which include the full module paths. This still leaves the problem that ctrl+] uses the current word so using it on Module::Class will only search for Class.
But this isn't really a ctags issue so I'll open a separate question on how best to write a custom command in vim to do this.
Using visual select to select the full definition and then ctrl+] will go to the correct definition.

Clion sort include statements

Is there a way to sort my #include statements in Clion? Additionally, can I do this automatically every time I save? I didn't manage to find any such functionality or plugin.
Yes, it is possible with help of clang-format.
File->Settings...->Languages & Framework->C/C++->Clangd->Enable clangs server
clang-format should be installed in your system. Normally it is available in your favourite repository. You can specify the path to it if required
File->Settings...->Tools->clang-format
You have to put .clang-format file into your project root with coding rules. More information you can find on clang-format web site. For example, I am using Google coding rules. My content looks like this:
Language: Cpp
BasedOnStyle: Google
This includes already the include statements sorting. However, there is a choice of other ready-to-use coding styles like LLVM, Mozilla, WebKit, Chromium which you can use and if necessary modify or you can create your own format by providing set of rules you want. The rule you might be interesting in is
SortIncludes (bool)
If true, clang-format will sort #includes.
Please refer to the clang format documentation here

Bootstrap wrapper class that imports minified bootstrap css file?

I've run into a rather annoying issue.
We have a very large code base which is mostly legacy code, and we have just begun implementing bootstrap. We have to "namespace" or "wrap" the bootstrap code in a class so that we can apply bootstrap to only parts of a page without affecting anything else.
If you're familiar with this technique, the common workaround is this:
.bootstrap-wrapper {
#import (less) "bootstrap.css";
}
See this issue: https://github.com/less/less.js/issues/1709
This works great as long as bootstrap.css is not minified. For whatever reason (probably something to do with semicolons), the minified version is not valid less even though it is valid css, and the less compiler errors out.
This wouldn't be much of an issue, except we are using Web Essentials (for VS 2013 update 4) to automatically compile our less into minified css files, and there is no granularity whatsoever.
We have the option to compile the unminified css files turned off, because we have no use for them, and only need the minified files. Since Web Essentials is all or nothing, there's no way for me to compile the unminified file in just this one case. We would have to carry an extra css file for every single compiled less file just to support this one case.
Are there any alternatives to creating a wrapper class this way, or is there anything I can do with Web Essentials to make this work?

xxxChanged methods dont' get called in JavaScript

I have two packages with several polymer custom elements.
Each package imports the other
One package contains elements that use or derive from the elements in the other package.
The other package uses the elements from the imported package just in the demo pages to make them more appealing.
There are no circular dependencies between elements.
In each package I have a folder 'example' that contains a demo page for each custom element.
I use the transformers configuration in pubspec.yaml and pub build to build the Javascript version of the demo pages.
(Because pub build doesn't yet support the example directory for entry points I created a symbolic link web that points to examples.)
When I execute pub build the examples are built and several of them work fine.
Not all though because there are limitations with transformers:
pub build with transformers doesn't support imported packages that have transformers configured in pubspec.yaml.
So my new approach was as suggested at the Dart web-ui group
I created a new package
The new package imports the two packages with the custom elements.
I symlinked all example files from the two custom elements packages to the web/ and web/src directory of the new package.
When I execute pub build all seems fine but
when I open the demo pages and debug them I see none of the xxxChanged methods of any of the custom elements get called (except when they are called explicitly from enteredView attached or ready).
Other methods like enteredView attached or ready are called though.
A diff between the files (about 14k size) showed several smaller differences but the most (about 98%) are equal.
This generated code (not minified) is not easy to decipher at least not for me and I found no hint what could have caused these differences.
Any Idea what can be the source of that problem?
When I add
transformers:
- polymer:
entry_points:
(without any entry_points)
to the pubspec.yaml of the custom elements packages all works fine in JavaScript too.
EDIT
related issues
generated JavaScript for polymer elements dosn't call xxxChanged for published attributes
add support for global transformers in code_transformers
polymer transformer can only be used on the application package and not on a library package
add support for dev_transformers

Resources