I need help implementing leaflet.js measuring tool with my Mapox.js map. Apparently this tool is not tested with mapbox yet.
The problem I face is referencing leaflet.js to employ the measuring tool causes Mapbox.js reference to not work.
Can someone please offer some help in implementing this in my mapbox.js app?
My mapbox code:
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
Measure tool code:
<link rel="stylesheet" href="http://erichsen-group.com/demoland/taylorpeterh/lib/leaflet-0.6.4/leaflet.css" />
<script src="http://erichsen-group.com/demoland/taylorpeterh/lib/leaflet-0.6.4/leaflet-src.js"></script>
<script src="http://erichsen-group.com/demoland/taylorpeterh/lib/jquery-1.6.4.min.js"></script>
<script src="http://erichsen-group.com/demoland/taylorpeterh/src/L.MeasuringTool.js"></script>
Error received: L.mapbox missing
any help appreciated.
Mapbox.js includes Leaflet, but you're including Leaflet again on your page, overwriting Mapbox.js. The answer is to not include Leaflet again.
Related
For example in html file I have
<script src="https://d3js.org/d3.v6.min.js"></script> and I want to get hints like d3->csv etc.
In WebStorm it is possible by adding https://d3js.org/d3.v6.min.js to External Libraries. Is there a way to do so in VSCode?
It is in a simple HTML+JS file without npm, node etc. like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
<script>
d3.SHOW_HINTS
</script>
</body>
</html>
For your d3 use case, all you need to do is:
move your <script> tag content from HTML file into a standalone JS file.
npm install #types/d3, like Mike Lischke has already pointed out
The result:
You cannot get the same kind of IntelliSense hint within the <script> tag inside a HTML file, since the official extension doesn't support it. Please refer to my answer to another question here for more details.
What you are after is the intellisense information, which is provided by the JS/TS language implementation. Beside the actual TS code (if provided) it uses socalled typings (or declaration) files. There are typings for many different libraries. For D3.js use npm install #types/d3 or add "#types/d3": "^5.7.2" to your dev-dependencies section in package.json and run npm install after that.
So I've got flutter web up and running (pretty amazing work tbh) and I went about bench marking the Button Press Count app that it gives by default on PageSpeed Insights. The results were impressive but there's one suggestion that would seem to increase the score. Is there any way to include <link rel='preload'> for the assets they mentioned?
And would there be anyway to do code splitting as well the way webpack does it for main.dart.js
See the website here: https://flutterdemoapp.netlify.app
You can try to add this code to your index.html file which is under the web folder,
<html>
<head>
<link rel='preload'>
<script defer type="application/javascript" src="main.dart.js"></script>
</head>
</html>
If you already tried that or this doesn't work so you can use this library. It makes this automatically.
I have a use case where the favicon shows up in desktop tabs but not on mobile devices in recently viewed websites on Chrome.
Upon browsing through SO and the net, I found multiple ways like use manifest.json, browserConfig.xml or multiple tags specifying all the expected sizes.
The documentation is pretty skewed and it is not easy to find one particular recommended way to show favicons.
These is what I have tried so far.
Using https://realfavicongenerator.net/, I uploaded a png image for
the favicon and included all the generated renditions, site.webmanifest and broswerconfig.xml in server root.
After this, I included the block generated in my tag in base template html.
Can I use this method or is there a better and more compact way to ensure favicon renders perfectly on all screen resolutions on all browsers both mobile and desktops?
The same best practices that hold good for a normal website hold good for an AEM application as well.
AEM WCM Core components has a working example of using multiple favicons for different viewports.
Refer to the below files from the repo.
Head.html under page component
<template data-sly-template.head="${ # page }" data-sly-use.headlibRenderer="headlibs.html">
------------------
<!--/* For IE 9 and below. ICO should be 32x32 pixels in size */-->
<sly data-sly-test.faviconIco="${page.favicons['faviconIco']}">
<!--[if IE]><link rel="shortcut icon" href="${faviconIco}"/><![endif]-->
</sly>
<!--/* Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. */-->
<link data-sly-test.faviconPng="${page.favicons['faviconPng']}"
rel="icon" type="image/png" href="${faviconPng}"/>
<link data-sly-test="${!faviconPng && faviconIco}"
rel="icon" href="${faviconIco}"/>
<link data-sly-test.touchIcon60="${page.favicons['touchIcon60']}"
rel="apple-touch-icon" sizes="60x60" href="${touchIcon60}"/>
<link data-sly-test.touchIcon76="${page.favicons['touchIcon76']}"
rel="apple-touch-icon" sizes="76x76" href="${touchIcon76}"/>
<link data-sly-test.touchIcon120="${page.favicons['touchIcon120']}"
rel="apple-touch-icon" sizes="120x120" href="${touchIcon120}"/>
<link data-sly-test.touchIcon152="${page.favicons['touchIcon152']}"
rel="apple-touch-icon" sizes="152x152" href="${touchIcon152}"/>
</template>
PageImpl.java
protected void loadFavicons(String designPath) {
favicons.put(PN_FAVICON_ICO, getFaviconPath(designPath, FN_FAVICON_ICO));
favicons.put(PN_FAVICON_PNG, getFaviconPath(designPath, FN_FAVICON_PNG));
favicons.put(PN_TOUCH_ICON_120, getFaviconPath(designPath, FN_TOUCH_ICON_120));
favicons.put(PN_TOUCH_ICON_152, getFaviconPath(designPath, FN_TOUCH_ICON_152));
favicons.put(PN_TOUCH_ICON_60, getFaviconPath(designPath, FN_TOUCH_ICON_60));
favicons.put(PN_TOUCH_ICON_76, getFaviconPath(designPath, FN_TOUCH_ICON_76));
}
For better understanding of favicon best practices -
favicon best pracs
jonathan neal
I've been wanting to get into learning build-automation within web development having only real experience with ANT in building Android applications.
I want to build websites that utilize LESS but I can't see how to achieve this as It sounds like a it's good practice to use the embedded JS approach in development and compile LESS into CSS when deploying but I don't understand a good approach that would match up the LESS links and JS include for jess.js within a build script. e.g.
Replacing:
... html ...
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
... html ...
With:
<link rel="stylesheet/css" type="text/css" href="styles.min.css" />
I hope what I've mentioned makes sense.
Useful
HTML5 Boilerplate Build Script
Phing
If anyone could give me any pointers/advise on this matter I would greatly appreciate it.
I'm on the core team for Less.js. Don't use the browser version of LESS if you can avoid it (for instance, you might be enabling users to edit "themes" in real-time in the browser... but unless you're doing something like that, avoid the browser version).
Try using this build tool for compiling Less to CSS: https://github.com/assemble/assemble-styles. The recommended practice is to pre-compile LESS to CSS, and assemble-styles makes it easy to create "bundles" or multiple versions of your LESS/CSS files, and you can add a watch task so that as you are working on the LESS files they automatically compile to CSS.
With LESS being compiled to CSS as part of the development process, you can then just focus your energy on how you want to handle your CSS in production (without having to even think about LESS). Make sense? If you have any questions I'm happy to help.
If you are familiar with npm, then this is simple to use. Just do npm install assemble-styles
Then follow the instructions on the README.
No build script will be able to merge a css file with a js file as in your example. They are two completely different languages serving two completely different needs, and they need to be kept apart from each other. As Less is, in the end, just CSS it makes no sense to merge a Less file into a js file.
Moreover best practices suggest to put css links in the head of your document (as Steve Souders suggests here) and javascript code at the end of the document, just before the closing body tag (again Steve Souders, here).
If you follow these rules (which is strongly recommended for performance) you'll end up placing css links far away from your js scripts in the html, like so:
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="styles.css" />
</head>
<body>
....here goes the content of the page
<script type="text/css" src="scripts.js"></script>
</body>
</html>
Now, let's imagine a very basic workflow.
You have your bare-bones HTML structure and you need to adjust its layout.
You add a css reset (reset.css) and start styling your document in a Less file called style.less. If you add
<link rel="stylesheet/less" type="text/css" href="styles.less" />
in the head of your document you won't be able to see any change as browsers do NOT understand .less files. These files need to be pre-processed and "translated" in css, so browsers can parse them and apply the given styles to the HTML page. So you'll run your (.less) file into a preprocessor which in turn will spit out a css file. So your <head> will be:
<head>
<link type="text/css" href="css/reset.css" />
<link type="text/css" href="css/styles.css" />
</head>
Notice that the styles.less file will NOT be referenced in the HTML, but only its CSS counterpart styles.css. When you'll be satisfied with your layout it'll be time to move on.
Here's now a good place for a build script to really shine.
A build script will (among other things) concatenate external files of the same kind.
In this case it will be able to merge these two files in a single one. Your new <head> will be:
<head>
<link type="text/css" href="css/main.css" />
</head>
The same thing will happen with js files at the bottom. From:
<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>
to:
<script src="scripts.js" type="text/javascript"></script>
As I said this is a very basic, rough example of a workflow using Less (or Sass/Scss, or Stylus) and a build script. I would say that Paul Irish gave the simplest and clearest representation of a build script in action in this video, which I highly recommend, especially because it features the HTML5 Boilerplate, as referenced in your question.
Hope this helped you better understanding, let me know if you have any doubts.
Good evening,
I have a website with a current css optimized for a desktop experience. I am working on an Iphone css, using IwebKit5 to provide a better user experience on the go.
I was using javascript, parsing the user agent to detect which css to use. I was looking for a way to avoid use of javascript, and discovered the media queries feature.
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css"/>
<!--<![endif]-->
<link type="text/css" rel="stylesheet" href="desktop.css"/>
This is what I tried, it works well on desktop (the Iphone css is ignored), but on Iphone I realized that both mobile.css and desktop.css are loaded, so I am trying to find a way to avoid that. What is the option to add in order to avoid this behavior ?
Thanks !
I believe you're approaching this the wrong way.
Include desktop.css first, and let that be included unconditionally.
Then, inside mobile.css, add/override whatever properties you need to.
The vast majority of desktop.css should still be relevant on the iPhone - you should just be adjusting sizes/lengths and other such small tweaks on various elements inside mobile.css.