see: Genius API Referent. All I can find is when hovering over the property in an example of the API docs: "Information for anchoring the referent in the source text". Does anyone know or have a link to docs about it? What structures might it have? Will the format of range differ depending on the type of item to which it refers?
Sometimes it looks like the range is a bit structured (/referents/10225839):
...
range: {
start: "/div[1]/p[1]",
startOffset: "0",
end: "/div[1]/p[1]",
endOffset: "76",
before: "d-color: #fff;
}
div {
width: auto;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
Example Domain
",
after: ". You may use this
domain in examples without prior coordination or asking for permission.
More information...
",
content: "This domain is established to be used for illustrative examples in documents"
},...
while other times it seems less so (/referents?song_id=3039923):
range: {
content: "I make a play fucking up your whole life"
},
Related
I am trying to create a basic express route to handle my emailing templates and for some reason, I cannot get the variable names to pass into mailgun. I have looked it up elsewhere, and have tried to input the variables into the data in every way possible and no matter what, when the email is received, the variable is completely blank. Is there another way I am supposed to input the variables in my api request?
Express data being sent:
const data = {
from: "Me <email#gmail.com>",
to: "myEmail#live.com",
subject: "Hello",
template: "thank_you_email",
recipient_name: "My Name",
"v:recipient_name": "My Name",
"h:X-Mailgun-Variables": JSON.stringify({
recipient_name: "My Name",
}),
};
As you can see in this code, I am trying to send over the variable in three different ways and still, it does not seem to be sent over, although the subject does work.
Here is the html template portion with this variable:
<h3
style="
margin: 0;
line-height: 24px;
mso-line-height-rule: exactly;
font-family: georgia, times,
'times new roman', serif;
font-size: 20px;
font-style: normal;
font-weight: normal;
color: #24578e;
"
>
Dear %recipient_name%,
</h3>
Is there something I am missing here? Thanks.
So, I found the answer soon after posting this question, but I will not delete it, in case others are having problems. In the email template, you must put variables in as
{{recipient_name}}
instead of
%recipient_name%
This is what seems to work instead; the only exception is when adding an unsubscribe button, you put in
%unsubscribe_url%
and mailgun will take care of the rest for you.
I wrote a Google Chrome extension, which popups a dialog with an autocomplete field and it's own style, but there are some sites where my CSS gets totally broken, which doesn't look very nice.
I know about isolating styles with iFrames, but in Google Chrome extension there is no way to isolate my HTML and CSS in this way. Another method is to wrap all my stuff into a separated div with it's own id and relative styles for that id, and I do so, but it seems that it doesn't work on some sites with "hard" tags style overloading or "!important" directives in the CSS code.
So, I want to know is there any way to really isolate my styles in z convenient way or it's my bad carma to overload every little CSS property to fix one or another style issue for each site?
By the way: I set up my manifest to load all the things at the "document_end", but I see it's not being applied to the stylesheets which is every time loaded whenever the DOM is ready.
At the time of asking the question, your only option was to either use iframes, or stylesheets with a very high specificity and explicitly set all properties that might affect styles. The last method is very cumbersome, because there will always be some property that is overlooked by you. Consequently, the only usable method for isolating stylesheets was to use iframes.
The solution to this problem -isolation of styles without iframes- is Shadow DOM (since Chrome 25). You can find a tutorial at HTML5 Rocks. For a real-world Chrome extension that uses Shadow DOM to isolate styles, see Display #Anchors (source code here).
As I've recently gone through the gauntlet of this issue, I want to share some information I think is valuable.
First, Rob W's answer is correct. Shadow DOM is the correct solution to this problem. However, in my case not only did I need CSS isolation, I also needed JavaScript events. For example, what happens if the user clicks a button that lives within the isolated HTML? This gets really ugly with just Shadow DOM, but we have another Web Components technology, Custom Elements, to the rescue. Except that as of this writing there is a bug in chrome that prevents custom element in chrome extensions. See my questions here and here and the bug here.
So where does that leave us? I believe the best solution today is IFrames, which is what I went with. The article shahalpk linked is great but it only describes part of the process. Here's how I did it:
First, create an html file and js file for your isolated widget. Everything inside these files will run in an isolated environment in an iframe. Be sure to source your js file from the html file.
//iframe.js
var button = document.querySelector('.my-button');
button.addEventListener('click', function() {
// do useful things
});
//iframe.html
<style>
/* css */
</style>
<button class='my-button'>Hi there</button>
<script src='iframe.js'></script>
Next, inside your content script create an iframe element in javascript. You need to do it in javascript because you have to use chrome.extension.getURL in order to grab your iframe html file:
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);
And that's it.
One thing to keep in mind: If you need to communicated between the iframe and the rest of the content script, you need to chrome.runtime.sendMessage() to the background page, and then chrome.tabs.sendMessage from the background page back to the tab. They can't communicate directly.
EDIT: I wrote a blog post detailing everything I learned through my process, including a complete example chrome extension and lots of links to different information:
https://apitman.com/3/#chrome-extension-content-script-stylesheet-isolation
In case my blog goes down, here's the sources to the original post:
Blog post
Example source
Either use all
.some-selector {
all: initial;
}
.some-selector * {
all: unset;
}
or use Shadow DOM
Library
function Widget(nodeName, appendTo){
this.outer = document.createElement(nodeName || 'DIV');
this.outer.className = 'extension-widget-' + chrome.runtime.id;
this.inner = this.outer.createShadowRoot();
(appendTo || document.body).appendChild(this.outer);
}
Widget.prototype.show = function(){
this.outer.style.display = 'block';
return this;
};
Widget.prototype.hide = function(){
this.outer.style.display = 'none';
return this;
};
Usage
var myWidget = new Widget();
myWidget.inner.innerHTML = '<h1>myWidget</h1>';
You can access the widget contents via myWidget.inner and the outer via myWidget.outer.
Styles
/*
* Reset Widget Wrapper Element
*/
.extension-widget-__MSG_##extension_id__ {
background: none;
border: none;
bottom: auto;
box-shadow: none;
color: black;
cursor: auto;
display: inline;
float: none;
font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: inherit;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
left: auto;
letter-spacing: 0;
line-height: 100%;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
padding: 0;
position: static;
right: auto;
text-align: left;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
vertical-align: baseline;
white-space: normal;
width: auto;
z-index: 2147483648;
}
/*
* Add your own styles here
* but always prefix them with:
*
* .extension-widget-__MSG_##extension_id__
*
*/
.extension-widget-__MSG_##extension_id__{
position: fixed;
top: 100px;
margin: 0 auto;
left: 0;
right: 0;
width: 500px;
}
.extension-widget-__MSG_##extension_id__::shadow h1 {
display: block;
margin: 0 auto;
padding: 20px;
background-color: yellow;
border: 10px solid green;
font-size: 20px;
text-align: center;
}
I recently created Boundary, a CSS+JS library to solve problems just like this. Boundary creates elements that are completely separate from the existing webpage's CSS.
Take creating a dialog for example. After installing Boundary, you can do this in your content script
var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");
Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");
Boundary.appendToBox(
"#yourDialogID",
"<button id='submit_button'>submit</button>"
);
Boundary.find("#submit_button").click(function() {
// some js after button is clicked.
});
Elements within #yourDialogID will not be affected by the existing webpage. And find() function returns a regular jQuery DOM element so you can do whatever you want with it.
Hope this helps. Please let me know if you have any question.
https://github.com/liviavinci/Boundary
Use iframes. It's a workaround, but works fine.
Maxime has written an article on it.
I have this in my css:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 150px;
}
}
I get an error with csslint task:
Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
Is there a way to declare these images so that I don't get this error?
Edit (another case):
.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
{
background:url('/public/system/assets/img/add.png') no-repeat right 17px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
And I get this error: [L651:C1]
Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. Use a common class for e.g. sprites. (d
uplicate-background-images)
One of your rules here seems totally redundant. The rule under max-width: 970px is already true when under max-width: 1200px.
To recap, change it to:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
width: 150px;
}
}
As for your edited question, you face a couple of options. Because you have different images, you can't combine the two rules there.
Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. This would only work in some cases, and it's a bit of a mess, depending on the layout. I made kind of a lazy example, just so you understand what I mean. You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle
Option two: easier but less semantic. Instead of using multiple backgrounds, use multiple elements. jsfiddle and example:
html:
<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>
css:
.tiles {
background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;
}
.linkmycars, .addcars {
width: 100%;
height: 100%;
}
.linkmycars {
background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}
.addcars {
background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}
Third option: don't worry too much about csslint. It's there to help you, not make you jump through hoops. Your code will work great either way.
Hope it helped.
This may be obvious, but I can't find how to enlarge the font size of an SC.LabelView. What I have now is
title: SC.LabelView.design({
layout: { centerX: 0, centerY: 0, height: 36, width: 200 },
tagName: "h1",
value: "Contacts"
})
Although it is an h1, it stays 'normal' text, but it is a title, as suggested by the property name.
SproutCore includes a CSS reset so that you can style your page and make it look the same across all browsers.
The best way to edit your styles is to add some CSS to my_app/resources/main_page.css using the font-size property.
$theme h1 {
font-size: 30px;
}
There are some comments and links to additional resources in the main_page.css file, but you can learn more from the Chance guide.
I'm trying to use the following code on my server to estimate the length of some text fields and potentially trim them before sending them by email...
String.prototype.visualLength = function()
{
var element = document.createElement("span");
element.css({
"visibility": "hidden",
"white-space": "nowrap",
"font-weight": "normal",
"font-size": "18px",
"line-height": "40px",
"font-family": "Helvetica, Arial, sans-serif",
"text-decoration": "none"
});
document.body.appendChild(element);
element.innerHTML = this;
return element.offsetWidth;
};
String.prototype.trimToPx = function(length)
{
var tmp = this;
var trimmed = this;
if (tmp.visualLength() > length)
{
trimmed += "...";
while (trimmed.visualLength() > length)
{
tmp = tmp.substring(0, tmp.length-1);
trimmed = tmp + "...";
}
};
return trimmed;
};
Obviously I'm getting an error because "document" is not defined server-side. I added the Meteor packages htmljs and domutils hoping they might solve this, but in vain. And I can't add the Node.js package jsdom because apparently it won't work in deployed Meteor apps.
Any idea how to achieve what I'm trying to do?
You cannot truly rely what will happen on client-side. Even Ubuntu and Windows shows the fonts different because of different hinting, antialiasing and they may have an effect on the displayed sizes.
If you modify your span's css as following, when it has a text larger than the desired space, no matter what, the remaining will be displayed as ...
max-width: 10%;
border: 1px #000 solid; // JUST TO SEE the effect clearly
width: 10%;
overflow: hidden;
height: 20px;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
** Please note that you need a proper height value, other wise the text will go to bottom and what you want will not be achieved.
Try on http://jsfiddle.net/sG6H2/
I don't think this is possible. Server-side code running in node.js does not run in the context of a web browser's rendering environment and so can't access the browser's DOM and available fonts and display configuration. Even if you were to successfully run your code and compute a number, that computation has no relationship to my device when I receive your email. The fonts, the display size and resolution (could be a desktop, could be a mobile device), my own configuration (for example I set a minimum font size in Firefox on my desktop), etc. Instead try defining your size in em units instead of pixels.