Way to Preview Twitter Widgets Locally - twitter

I'm building a website locally and would like to be able to see what the embedded Twitter widgets look like without uploading everything.
Here is the code for a basic Follow button (fiddle):
Follow #twitter
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
If you save this locally on your computer as whatever.html and then open it, you'll notice that the widget script never loads the widget.
Is there any way to get this to work? Thanks.

Add http: before the word "platform" in this portion of the code:
src="//platform.twitter.com/widgets.js"
so that it reads:
src="http://platform.twitter.com/widgets.js"

Related

Electron ShareMenu Example

Electron has an API for the macOS share menu, but the page does not include an example of how to use it. I'm struggling to get started, as I'm not sure which file to put the code in, or how to plumb it to an interface element. How do you use the ShareMenu API?

Webpack url-loader PDF data URI link for Vue site stops working in iOS 14

I have a Vue.js website with a PDF file which is included in my ultimate javascript bundle via webpack. (It's my CV.) The following build and delivery process has worked perfectly fine for me since 2017, but suddenly stopped working in iOS 14:
Build the PDF with LaTeX.
Use webpack's url-loader to include the PDF in my webpack bundle as a base64 data URI.
Load that URL into a vuex data store, and then just deliver it as a link when clicked.
For the last three years, this has worked fine: I've been able to click on the link and get a working PDF. It's been kind of random and platform-specific whether the PDF opens in-browser or shows up in a download folder, and whether it gets the filename I've asked it to get or not, but, well, that doesn't matter to me. And the core functionality of click the link and get the PDF has worked on every browser and every platform I've ever tried it on.
All of a sudden, with iOS 14, it's stopped working. Now, when I try to activate the PDF link in iOS Safari, nothing happens at all. When I do it in iOS Chrome, it produces a little popup claiming it downloaded a document, but nothing seems to actually be able to open the document. And when I do it in iOS DuckDuckGo, it just displays the base64 data URI in the address bar.
Interestingly, if I take the dataURI that DDG displays in the address bar and copy and paste it into Safari or Chrome on iOS, it actually displays my pdf. So the browsers still have the capacity to display a PDF from a data URI. It just doesn't want to do so from my link.
And my site still works as expected on the desktop. Including in Safari on the desktop. Also, it still works on my wife's phone (she's still on iOS 13). So this is clearly something Apple changed in iOS 14. But what? And how to get my site working again?
I'm guessing that Apple has changed the behavior of the renderer in iOS in some fashion to cause it to break across browsers but nowhere else (since browsers in iOS are all still required to rely on webkit, right?)
This is a pretty important feature to me. I made this decision deliberately for perceived performance---combined with pre-rendering, everything on my site, including the PDF, loads very close to instantly from the user perspective. So I'd really like to keep it.
I'm using Webpack 2.6.1 and Vue 2.3.3. This is a stable build that has been working flawlessly for three years, so I haven't felt the need to update anything except for security updates.
After searching around, I did find this Apple dev discussion which suggests that in iOS 14, Apple newly blocks redirects to data URIs. But I'm not doing a redirect, I'm actually navigating directly to the URI through a link. And the linked discussion suggests that the newly banned behavior just brings Apple in line with what other browsers already ban---but my code works in every other browser, so that can't be it.
Relevant code, to the extent it matters (though it's so basic and obvious that I doubt a simple code fix will be the answer here):
from my webpack.base.js:
{
test: /\.(pdf)$/,
loader: 'url-loader'
},
from my vuex store, in state.js
import cvURL from './assets/pdf/gowdercv.pdf';
from the component containing the link that points to PDF:
<p><a :href="cvURL" download="gowdercv.pdf"><img src="../../assets/icons/file-pdf.svg" class="cvicon"> Download in PDF</a></p>
which is loaded as a computed property to the component, i.e.,
computed: {
cvURL: function(){return this.$store.state.cvURL;},
Does anyone know how to get functionality back in iOS? Is there a workaround built in recent versions of webpack or vue for this? Thanks!
Update: after some help off SO, an acquaintance turned up this similar problem, which also came up with a solution: turning the base64 URI into a blob and passing that data url. Which also solves my problem. Though that SO doesn't have an accepted answer, so I can't vote to close my own question as a duplicate, alas.

Open USDZ File into QuickLook

I am interested in opening a USDZ file in a Safari browser and making sure that it ends up in the QLPreviewer and I was wondering if there is a browser API for safari that can do this. I want to make sure that the link doesn't just open in a new tab.
I have tried just opening a USDZ file but that just gives the appearance of a new tab where you have the option to open into files and stuff like that.
There isn't really any code yet but if that is the best way to achieve this that would make sense.
I see so from what I have read here you need to specify the rel="ar" which I am still not sure if it is working. I have tried it within codepen and nothing is really happening.
<a rel="ar" href="https://s3.amazonaws.com/test.cylindev.com/AR/4472/YF2013-XH-F-1S/JLA-8852-29.usdz">
<img src=""><div class="ar-glyph-background">
<div class="ar-icon"></div>
<div class="ar-text">View in AR</div></div>
</a>
It still doesn't work in a codepen environment but I know you can access previews from that environment and I am not sure where the issue is.
It turns out that you need an image tag within the link and the code I was actually using didn't have that image tag. Very weird choice by the apple devs.

Start a dowload from external link in Rails

I'm trying to write code in my controller download to start a download from some external url say www.abc.com/foo.mp4. So far I have built it this way:
def download
redirect_to 'www.abc.com/foo.mp4'
end
It works but the problem is that it opens a video in the same tab. What I want is that it should start a download in the browser of this video.
I searched about it in forums but couldn't find any solution. All I found was a way to download the video first using the URL and then provide it as download but that's not what I want. I want the download to start directly from the external URL.
I think this might help you: Download from a link with HTML5
In your case it would be:
download me
That way, from the same webpage you are, when the user clicks on it, it will start the download and you don't go throught the controller, but in case you want to go throught the controller "download" and then just render a page with some kind of information saying that is downloading or something else, then put that link I wrote above somewhere in that page (and if you want, you can give it a class name and with css hide that class so that link is not visible but it is there) and at the end a Javascript function that calls itself when it is loaded and performs the action of clicking to that link:
(function(){
$('#whateverIdYouGiveToTheHtmlElement').click();
})();
I should clarify that $('#whateverIdYouGiveToTheLink').click(); is jQuery and not pure Javascript, but since you are using Rails I assume the project has jQuery (by default Rails comes with jQuery).

To launch/activate/run Chrome extension with a clickable webpage link?

I have always been using Safari but I pulled the plug on Safari completely a while ago, and the ability to do a lot of things with Chrome, makes me want to be able to do more.
Here is what I was wondering:
I have a lot of newly installed extensions and webapps.
I know there are extensions that can be used upon activation and other extensions that run in the background without the need for it to be activated by clicking a button of the extensions icon.
Is there a way to launch (activate) an extension in chrome with a link (URL) in a webpage. I mean is there a URL path to activating an extension.
Also,
I like the pinned tab feature, but it seems I can only do this: Pin a tab and for it to open just like that every time by adding current tabs to 'open these pages'. But if I pinned for eg. gmail.com and then I close it and later open it up again little later it won't pin it. Is using JSON with the 128 px icon and making your own web app the only way this can be achieved?
Thank you.
As far as I know: No.
What I got from reading through the Chrome-docs is, that websites can connect to activated extensions by using the Chrome API's method runtime.connect.
I know there are extensions [...] activated by clicking a button of the extensions icon
This doesn't seem to be a general feature of Chrome extensions. The Chrome-intern activation can be found at chrome://extensions/ in your browser. These settings can't be modified by websites. You may want to create a work-around by using a "second" activation-layer in your extension.
Websites can only ask the browser to install extensions by using the webstore API.
To your second question: This chrome-extension should allow you to automatically pin tabs specified by your url (haven't tried it for myself though). Maybe this can solve your problem.
I see this answer comes late but if anyone stumbles on this as I did, hopefully might find this useful. I can help you with the url of a Chrome Extension. Open the Web Inspector console and type this to get the url:
chrome.extension.getURL()

Resources