I want to make all my tools into one extension including snippets, I know how to add snippets by steps operations, and how to make an extension, but how can we add snippets by making and installing an extension?
You can add contribution point 'snippets' in package.json .
{
"contributes": {
"snippets": [
{
"language": "go",
"path": "./snippets/go.json"
}
]
}
}
The language attribute is the language identifier.
The path is the relative path to the snippet file.
Here are official references : https://code.visualstudio.com/api/references/contribution-points#contributes.snippets
or
You can also choose New Code Snippets when creating an extension project with yo code command. This way is useful to create an extension just for snippets.
Hope this helps!
I want to build JSON-LD for my homepage. In my page I have:
header
navigation (2 series)
sidebar (with 2 list of items)
one list of main items
footer
I try build the JSON-LD like this:
<script type="application/ld+json">
[
{
"#context": "http://schema.org",
"#type": "WebSite",
.
.
.
},
{
"#context": "http://schema.org",
"#type": "WebPage",
"mainEntity":{
"#type": "ItemList",
"itemListElement":[
{
"#type": "BlogPosting",
.
.// 4- one list of main items
.
}
...
]
}
.
.
.
}]
</script>
If my structure is true,
how can I add SiteNavigationElement and sidebar content to this JSON object? Do I have to add another object or I can insert it in WebPage?
I use JSON-LD. Do I need to use Microdata too? or is JSON-LD enough?
I create a full sitemap-index.xml for all menu and items. Do I really need to add SiteNavigationElement (and another thing except mainEntity) in JSON-LD?
(Everything you can do with Microdata can also be done with JSON-LD, and vice versa. So there is no need to mix. There might be consumers that support only one syntax for certain features, though.)
You can add SiteNavigationElement with the hasPart property to the WebPage:
{
"#context": "http://schema.org",
"#type": "WebPage",
"hasPart":
{
"#type": "SiteNavigationElement"
}
}
But using SiteNavigationElement (and the other WebPageElement types) is typically not useful, so you might want to consider omitting it.
So I am writing an app which allows an admin user to create a journey around a specific location with different stopping points.
For displaying a map, adding markers, flyTo location and etc I am using Mapbox GL.
I was using cURL implementation of Mapbox API to get driving directions and then draw a line on a map
So as an example of a cURL call I recieve a list of coordinates which represent my directions.
The Problem comes when I try to connect these points on a map.
As an example of HTML with some JS
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<ACCESS TOKEN>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v8',
center: [-122.486052, 37.830348],
zoom: 15
});
map.on('load', function () {
map.addSource("route", {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-155.088899,19.722942],[-155.08565,19.72472],[-155.084661,19.723701],[-155.083569,19.723139],[-155.079557,19.722262],[-155.074227,19.721938],[-155.069939,19.722545],[-155.070061,19.721225],[-155.07007,19.711726]
]
}
}
});
map.addLayer({
"id": "route",
"type": "line",
"source": "route",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#888",
"line-width": 8
}
});
});
</script>
</body>
</html>
You can see a set of coordinates that will be connected to draw a line. I was wondering if there is a way to connect these points so that the line will follow only the road (for driving)?
To explain it better, this is a close zoom of the output
I know it's quite generic explanation of my problem, but I hope it's understandable.
I have been trying to do some magic with Mapbox Gl Directions API but no luck, as I have to add a contoller which I dont want to. I only need to draw a route and not allow a public user to be able to modify it.
Any advices?
Not sure if I understood correctly, but when you send you request to get directions include in the url 'overview=full'. This will return a more detailed path, so you have no need to use Matching API after.
Example:
`https://api.mapbox.com/directions/v5/mapbox/driving/-74.50,40;-80,50?overview=full&geometries=geojson&access_token=
I've been trying to do this today and succeded to get directions into a map and remove the start and end control by pulling down the mapbox-gl-directions project from git hub and making a minor mod to src/directions.js
I commented out lines 48 to 52
// Add controllers to the page
//new Inputs(inputEl, store, this.actions, this.map);
//new Instructions(directionsEl, store, {
// hoverMarker: this.actions.hoverMarker,
// setRouteIndex: this.actions.setRouteIndex
//}, this.map);
This was relatively easy to test with the setup in npm and my own test files by running the npm setup as per https://github.com/mapbox/mapbox-gl-directions/blob/master/CONTRIBUTING.md
npm install & npm start & open http://localhost:9966/example/
I also added the line:
localStorage.setItem('MapboxAccessToken', '<TOKEN HERE>');
below the require('../); in example/index.js. While you have the example running in npm you can access a new bundled version of the plugin from http://localhost:9966/example/bundle.js
I was then able to change the line
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v2.0.0/mapbox-gl-directions.js'></script>
to
<script src='http://localhost:9966/example/bundle.js'></script>
There's a whole bunch of magic going in on in the example runner in npm which I don't know anything about but it all just worked on my machine. Hope this helps. The directions line works with animations and pitch, zoom and bearing animations. See a screen grab below:
UPDATE: Adding reply to here so I can show a screen grab. #Andrejus, as this hack relies on the mapbox gl directions plugin behaviour rather than drawing the paths from scratch you get road following built in and you have access to the directions API to add waypoints to do your A->B->C->D as so:
map.on('load', function() {
directions.setOrigin(start);
directions.addWaypoint(0, [-0.07571203, 51.51424049]);
directions.addWaypoint(1, [-0.12416858, 51.50779757]);
directions.setDestination(end);
});
The documentation says you can have up to 25 way points.
The mapbox-gl-directions plugin doesn't have an option to turn off the on-screen controls, they are added in the onAdd(map) method of the Directions class which is called when the directions are added to the map. I wanted to see if I could remove them earlier and was experimenting, thus the hack. To make a flexible solution, it might be possible to add an option passed in to the constructor of the Directions class. There are other options passed in there although these seem to be bound to parameters for the call to the Directions API:
var directions = new mapboxgl.Directions({
unit: 'metric',
profile: 'cycling'
});
So there might be a better solution than that. I've been using Mapbox for <1 day and don't know much about how its written or structured.
Note also that the code alterations are in a plugin, not the core of mapbox gl, so relatively isolated. BTW this plugin is a wrapper for the cURL API you were calling which returned the array of points. Presumably the source on GitHub will include code which does the road following where it renders the line, if that's definitely what you want to do.
Actually it was easier that I thought, All I had to do is to get a response from directions API, and pass a returned array to Mapbox Map Matching, that way it returns a perfect route. All documented in Mapbox API
I am using Backbone.js and RequireJs for a single page application.
When I run my karma tests, there is no css included. When debugging it is difficult to know what is going on or why something is not working because the html elements are not styled like they are in the production appplication.
Is is possible to inlcude css in the karma tests while debugging using webstorm?
I have already tried including all css in the files array
files: [
{pattern: 'app/css/*.css', included: false},
...
],
This is the css file that is included in index.html of the production application, there is nowhere in the karma configuration that I can find to add something like this.
<link rel="stylesheet" href="css/styles.css" />
I worked it out:
You need to add all your css to your karma.conf 'files' array.
files: [
{pattern: 'app/**/*.css', included: false},
...
],
Create a new module called test_css.js, the location of this file will depend on your folder structure. In here you need to programatically inject all your css files into your the current document.
define(function(require) {
"use strict";
require('jquery');
//Modify to suit your requirements
$('body').append('<link rel="stylesheet" href="/base/app/css/styles.css" />');
});
Include this module as part of the deps array in test-main.js
requirejs.config({
baseUrl: '/base/app/js',
paths: {
...
'test.css' : '../test_utils/test_css'
},
// ask Require.js to load these files (all our tests)
deps: ['test.css'].concat(tests),
// start test run, once Require.js is done
callback: window.__karma__.start
});
jax answer was very helpful.
Additionally, for those not using jQuery but d3.js, your test-css.js can look like this:
define([
'd3'
], function(d3) {
"use strict";
d3.select('body').append('link')
.attr('rel', 'stylesheet')
.attr('href', '/base/app/styles/mystyles.css');
});
I resolved a quite similar issue where my components were not appearing in Karma Test Runner by adding following to files key of karma.conf.js. I wanted Karma to automatically include the file so I set included to true.
.
.
.
files: [
{ pattern: 'node_modules/abc/abc.min.css', included:true, watched: false }
],
Upon doing this, I could then view my components in proper styling which made unit testing a lot faster and easier.
I know about getElementById, getElementByNames ... and getElementsByTagName
What other methods are available to select an element or elements from the DOM ? What if an item does not have an Id or Name.
I have heard that I can use XPath expression to select a range of HTML elements. How do i do that using JavaScript? Is there a library that will help me achieve this?
Thanx a lot in advance :)
Why not just use jQuery?
If you need it in scripts you can inject jquery.js through manifest.json:
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"js": ["jquery.js", "myscript.js"]
}
]
If you need it in html pages (background, options etc) you can use
<script src="jquery.js"></script>
or even
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>