I love Python, and have never much cared for JavaScript. So I was pretty excited to learn about Transcrypt. I recently started a web-based project that uses Django for the back-end and a Leaflet map (specifically Esri Leaflet) that plays a central role in the front-end. I'm trying to figure out if Transcrypt is a good fit for my project. However, the documentation and examples on Transcrypt's website are either too simple or delve into more advanced topics too quickly. As a result, I'm having a hard time deciding whether Transcrypt will add anything positive to my project or will simply bring more complexity and bugs. I'd rather not spend several hours trying to get Transcrypt working (time that could be productively spent simply writing JavaScript) only to find out Transcrypt isn't a good fit for my website. So I have a few questions.
I know Transcrypt is designed to work with any JavaScript library. Will it also work with map-based GIS libraries?
For example, if I can successfully encapsulate the whole of Esri Leaflet (but maybe I won't be able to?), Transcrypt would allow me to write the following in Python?
var map = L.map('map').setView([40.91, -96.63], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();
L.esri.Geocoding.geosearch({
providers: [
arcgisOnline,
L.esri.Geocoding.mapServiceProvider({
label: 'States and Counties',
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer',
layers: [2, 3],
searchFields: ['NAME', 'STATE_NAME']
})
]
}).addTo(map);
By the way, that code was taken from here.
I didn't quite understand the explanations about integrating with JavaScript libraries found here, specifically where it says:
Another way is to encapsulate the JavaScript library as a whole in a Transcrypt module. In the distribution this is done for the fabric module, that encapsulates fabric.js and is imported in the Pong example. In this way the global namespace stays clean.
So I can't really tell if Transcrypt could handle all the GIS and map stuff.
The Leaflet map will be the main user interface for my site. So knowing that Transcrypt could encapsulate it is kind of important. There will also be a lot of event listeners connected to the map, and data going back and forth between the front and back-ends. I'm probably going to be using jQuery's Ajax for a lot of that. I saw a few simple jQuery examples on the Transcrypt website, but am not sure if Transcrypt is really up to the job yet.
I've noticed that the only person answering the Transcrypt questions is its creator, Jacques de Hooge. I guess my questions are really directed at him. Any advice you can offer me is much appreciated, Jacques!
You don't need to encapsulate the Leaflet library. You can use it just as is in Transcrypt.
Here an example. In a new folder create the HTML file mymap.html`:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="leaflet.css"/>
<script src="leaflet.js"></script>
</head>
<body>
<div id="the-map" style="width: 1000px; height: 800px;"></div>
<script type="module">import * as main from './__target__/mymap.js';</script>
</body>
</html>
And create the Transcrypt file mymap.py:
def main(map_id):
watercolorTiles = {'linkTpl': 'http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg',
'attribution': '© Stamen Maps'}
australiaView = {'center': [-27.30,133.62],
'zoomSnap': 0.1,
'zoom': 4.5}
# Build the map
map = L.map(map_id, australiaView)
L.tileLayer(watercolorTiles['linkTpl'], {
'attribution': watercolorTiles['attribution'],
}).addTo(map);
main('the-map')
Note that teh Transcrypt code uses the global Lefa;et object L just as is. This factory object is already instantiated in leaflet.js and you can use it to build your map.
To view the map you need to do:
Download the Leaflet library and copy leaflet.css and leaflet.js into your folder.
On the Terminal command line (after cd'ing into your folder) transpile the .py file :
$ transcrypt mymap.py
Fire up a webserver serving your folder, e.g. with:
$ python3 -m http.server
Now go in your browser to http://localhost:8000/mymap.html and look at a beautiful (in this case watercolour) map of Australia.
Your geosearch code snippet could be written in a similarly fashion with Transcrypt - just make sure to write dictionary keys as Python strings (so instead of attribution write 'attribution')!
Related
I'm trying to optimalize web for speed and wanna ask about Eliminating render-blocking CSS and JS.
by JS 'm only using async attr. - lets say, throwin' it at plugins like flexslider, lightbox.. but should I also use this with the base scripts like ?:
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>
Whenever i add async on some script and test it, that .js script won't just operate - as if not linked. What am I doing wrong? And is this enough ... ?
-by CSS - tring to impove it like this :
<link rel="preload" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" media="print" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></noscript>
This cuts down the time of rendering CSS resources, but again when using it on e.g fontawesome - icons are not loaded as if link was't there...So, is this a good way of rendering CSS please ?
JavaScript
When using async you have to ensure that load order does not affect your implementation.
Async basically says "load everything as quickly as you can, I don't care about load order".
If you haven't accounted for this then the easiest fix is to use defer on your JavaScript instead of async. This basically says "load everything after the HTML has loaded but please keep the order as some scripts depend on others".
This will be slightly slower overall but still fix the JavaScript being render blocking.
You should defer all scripts, except any scripts that are essential for above the fold operations (and then you should inline those scripts in a <script> tag in the <header>, obviously keep this to a minimum).
CSS
Render blocking CSS is anything sitting in an external file that relates to content "above the fold".
To understand this fully you need to understand how the browser render things but in essence anything that is visible without scrolling ("above the fold" content) is delayed if your CSS is in an external file as it needs that information to know how to present and lay things out.
What you need to do is find all the styles that apply to your above the fold content and inline them in a <style> tag in the page <header>. Yet again this needs to be kept to a minimum so you may need to make the above the fold CSS custom rather than using bootstrap....including the whole of bootstrap inline would not be good!
Then all other styles can sit in external style sheets.
This way the second the page's HTML is downloaded it has everything it needs to layout the page without waiting for any other requests.
Font Awesome
Ah fonts for icons. I won't go into why that is a bad practice from an accessibility and performance perspective as I have covered that numerous times before.
Instead I will simply say that for any "above the fold" icons you should instead swap them for inline SVGs. This is for the same reason as inlining your CSS, inline SVGs do not need a network request to render so the second the HTML is loaded your page can be displayed.
just a suggestion, have no way of testing atm but try putting 'async' before the source attribute. also, try adding a copied line with the attribute defer instead of async for wider browser support.
Can I make the generated HTML page from my DDoc-marked-up D program use richer coloring and type-setting? The default is black-and-white.
I'm currently calling DMD as
dmd -debug -gc -unittest -D -Dd$OUTPUT_DIR
Well, you should probably read through http://dlang.org/ddoc.html to get some of the details, but ultimately, what you need is a css file which tells it how to present the page. That can be set via the DDOC macro.
What I'd suggest doing is taking a look at https://github.com/D-Programming-Language/dlang.org, which contains the code for dlang.org - including the ddoc stuff. In particular, you want to grab std.ddoc along with the css, images, and js folders (as they are all referenced by std.ddoc). If you then give std.ddoc to dmd as part of your documentation build and have those folders in the parent directory of the documentation, the generated documentation should end up looking like the documentation on dlang.org. If you want to put the folders elsewhere, then just tweak the paths to them in std.ddoc.
If you want to change what the documentation looks like, just adjust std.ddoc and the css files accordingly. At that point, it's html and css stuff that you're dealing with, so you'll have to have some clue how those work to make the necessary changes to either the macros in std.ddoc or to the css files themselves. And of course, if you want to do anything with the js files, you'll need to know javascript. You can strip out all of the js and images if you want to. They're just what's used for dlang.org, but again, you'll have to have some clue how html and friends work to know what to do with that. I'm not particularly well versed in any of that, so when I've generated documentation, I've typically made only minimal changes to what dlang.org uses, but all I've typically been looking for is to get more legible colors than the default rather than anything specific.
Sorry that I can't be more specific or helpful than that, but the best that I've done with it is stumble through it enough to get pages looking like dlang.org, since I know next to nothing about web development. Hopefully this will point you in the right direction though.
Something else that you might want to look into is ddox, which uses ddoc comments to generate better looking documentation than dmd does. And it's likely that dlang.org will be switching to using ddox-generated documentation sometime in the relatively near future (some of the details still need to be sorted out, so I don't know when exactly, but that's the current plan). So, using ddox may ultimately end up becoming more common than using dmd to generate the documentation.
You can create your own .ddoc config file in which you override or create new ddoc macros to use class names and id's. Then you can style the page using CSS.
Sample .ddoc file containing custom CSS, Notice the theme.css file in the head HTML section:
DDOC = <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link type="text/css" href="theme.css" rel="stylesheet" media="all" />
<title>$(TITLE)</title>
</head>
<body>
<h1>$(TITLE)</h1>
$(BODY)
</body>
</html>
H2 = <h2>$0</h2>
H3 = <h3>$0</h3>
STRONG = <strong>$0</strong>
EM = <em>$0</em>
DDOC_DECL = $(H2 $0)
DDOC_DECL_DD = <div class="declaration-description">$0</div>
DDOC_CLASS_MEMBERS = <div class="class-members">$0</div>
DDOC_SUMMARY = $(P $0)
DDOC_DESCRIPTION = $(P $0)
DDOC_MEMBERS = <div class="members">$0</div>
DDOC_ENUM_MEMBERS = <div class="enum-members">$0</div>
DDOC_MODULE_MEMBERS = <div class="module-members">$0</div>
DDOC_STRUCT_MEMBERS = <div class="struct-members">$0</div>
DDOC_TEMPLATE_MEMBERS = <div class="template-members">$0</div>
This file should be saved somewhere and added to the sc.ini file (in the case of Windows) or the dmd.conf file (in the case of Mac/Linux) like this:
DDOCFILE=myproject.ddoc
Then the next time you compile using -D, HTML is read from the custom ddoc macros instead of the built-in stuff and viola, you have style-able class names and id's to use with CSS.
Here's a preview of pretty documentation using a custom style-sheet and macros: http://htmlpreview.github.io/?https://github.com/kalekold/dunit/master/docs/dunit/toolkit.html
HTML files: https://github.com/nomad-software/dunit/tree/master/docs/dunit
Full ddoc macro listings can be found here: http://dlang.org/ddoc.html
trying to learn the Resources plugin
From my understanding, it helps to define 'resources' such as css and javascript files and automatically pull them into your gsp's when needed. I understand how to create modules that can then be loaded in using tags etc.
The part im not understanding is this: http://grails-plugins.github.com/grails-resources/guide/4.%20Using%20resources.html#4.2%20Linking%20to%20images
So ive created a module called 'images' in Config.groovy as follows:
grails.resources.modules = {
images {
resource url:'/images/view.jpg', attrs:[width: 1280, height:720 , alt: 'my view']
resource url:'/images/breakfast.jpg', attrs:[width: 1280, height:720, alt: 'breakfast']
}
}
The resources are included in the .gsp page in the head section as follows:
<head>
<r:require modules="jquery-ui, blueprint"/>
</head>
i know the resources have been successfully added to the head section because when i inspect the page source i see them there:
<link href="/ResourceTest/static/Aa7jV0N2qZjOz7TLZ9cl5cREIh2y5jJYV0ytn4nQg9r.jpg" rel="shortcut icon" width="1280" height="720" alt="my view" />
<link href="/ResourceTest/static/IpQBSjrYeLDdSUBGbP3jhf6Kkhvu1zV3XRtwWfKOIMn.jpg" rel="shortcut icon" width="1280" height="720" alt="breakfast" />
My question is this: how are the image resources then used? i mean i know if it was javascript, the importing of the resource gives you access to use the functions in the html code, but with regards to images, the site says "Once you have done this, using to reference them would automatically set the width, height and other attributes."
How? I've tried the following:
<r:img module="images">
<r:img alt="breakfast">
and a handful of others with no success
what does work is:
<r:img uri="/images/breakfast.jpg">
but this works regardless of whether or not you add the module with the r:require tag.. So whats the point of using this plugin for images then and how would i use it?
The <r:img> tag works just fine with our without <r:require>; it even works with undeclared image resources.
The point of the require tag is to prevent resource duplication. So, for instance, suppose you have multiple javascript resources that rely on jQuery, and they're all required. Add another layer of complication: say you're actually pulling together different gsp templates via sitemesh, and they each have their own resource dependencies. If you just put the normal HTML code to reference those resources in the head of each gsp layout, you might get multiple instances of them in your page header, which could prove problematic. Using the resources plugin makes sure you only get one instance of the required resource.
See http://grails-plugins.github.io/grails-resources/ref/Tags/require.html and http://grails-plugins.github.io/grails-resources/ref/Tags/layoutResources.html.
With images, though, this is not really necessary. If you have an image more than once on a page, it's probably because you wanted it, or because you're applying redundant layouts and need to refactor a bit. So, you are correct that the require tag doesn't really do much for images called via <r:img>. This is simply because images are a different sort of resource, so they're treated differently. Don't sweat it. :)
I want to show some dynamic content in a presentation. However, I am not sure I have time by Thursday to make slides in the way I would like to within Mathematica.
Is it possible to have Dynamic objects built in Mathematica within A Powerpoint (Microsoft) or Keynote (Apple) presentation ?
What is wrong with making few Manipulates, export them each to separate CDF, and you got your presentation there.
You can make a web page, each page can be contain one CDF. Each page will be like your one slide.
You can click a link to go to the next web page.next slide, and in it you can run the next CDF.
To insert a CDF into a web page, is very simple, like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY >
<p><script src="http://www.wolfram.com/cdf-player/plugin/v1.0/cdfplugin.js"
type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var cdf = new cdf_plugin();
cdf.addCDFObject("source", "source.cdf",840,670);
// ]]></script>
<img id="source" src="screen_shot.png"
alt="screen_shot" />
</BODY>
</HTML>
Put your cdf files in the same folder.
If you know latex, you can write latex document, make them as sections of a document, insert the HTML code in latex, export the latex document to html using latex2html. (this is what I do with my web pages). Like this
\documentclass[12pt]{article}
\usepackage{graphicx}
\usepackage{html}
\begin{document}
\begin{rawhtml}
<p><script src="http://www.wolfram.com/cdf-player/plugin/v1.0/cdfplugin.js"
type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var cdf = new cdf_plugin();
cdf.addCDFObject("source", "source.cdf",840,670);
// ]]></script>
<img id="source" src="screen_shot.png"
alt="screen_shot" />
\end{rawhtml}
\end{document}
Then type latex2html foo.tex and that will generate the html for you. This way you can write real mathematics using Latex, and have the CDF in the same page we well, next to your equations.
All what you need for your presentation is a browser and the CDF plugin installed.
Or, you can simply keep everything in Mathematica itself, with a Manipulate in each section of a mathematica notebook, and just run the notebook inside Mathematica at the presentation.
Forget about power points and PDF's. That is so boring and old fashioned now :)
CDF is the way to go.
If your presentation laptop has Mathematica you could use MMA itself to give the presentation. It has a presentation mode.
Yes you can! I was wondering the exact same thing for a group presentation where other members were making PowerPoint slides. It's simply a matter of embedding the slide into an HTML file then embedding the HTML file in a PowerPoint slide. It's not perfect, but it works surprisingly well and you maintain full interactivity.
Export a video file, eg by
an = Table[
Plot[Cos[x/a],
{x, 0, 20*Pi},
PlotRange \[Rule] {-1, 1}
],
{a, 0.1, 10, .1}
];
Export["~/Desktop/an.avi", an]
I don't think it is possible to do what you want, since even if you can use the standard java script to link to the CDF, there is no properly integrated CDF plugin for powerpoint, keynote, a pdf viewer etc...
Either, as other people have suggested, learn how to use Mathematica/CDF to make presentations - see the discussion in belisarius's SO question. Or use a html-based presentation.
It is possible to export a keynote presentation to html. Here's a tutorial that shows how to tweak it to get a navigation toolbar and make movies work - and an example is here. You should be able to embed a CDF (see also Walking Randomly) using similar modifications of the outputted html.
Alternatively, create a HTML based presentation from the start. S5 is a good opensource html slideshow. It uses markdown, so it's just like writing in stackexchange sites! Instiki includes a S5 mode. You can include raw-html in the presentation, so you should be able to embed CDF's like above.
Put your foot inside the boots of an expert developer that is new to web development.
Certainly he will must deal with JavaScript and probably he will encounter a bit of difficulties with choosing a framework for its job.
For general purpose: which one do you suggest if the an easy usage is the first requirements?
I've worked with jQuery, script.aculo.us, and mootools, and I would highly recommend jQuery, which seems to trump a lot of the other frameworks in its ease of use.
For someone who is familiar with HTML and CSS, jQuery fits the paradigm really well, and makes the transition into Javascript very simple.
For example, with html such as this:
<div id="content">
<h2>Heading</h2>
<p class="featured">This content</p>
</div>
You might have CSS selectors that looked like this:
#content {
margin: 0 auto;
width: 760px;
}
#content h2 {
font-size: 110%;
}
#content p.featured {
font-weight: bold;
}
In jQuery, you can manipulate those elements using the same selectors:
$('#content').hide();
$('#content h2').html('New Heading');
$('#content p.featured').css('border', '#cccccc 1px solid');
jQuery also has excellent documentation that can really help a beginner jump right in.
I would also put a vote in for jQuery. I have found it to be simple to use, easy to learn, powerful, well documented, feature rich, extensible and backed by a great community of plugin developers.
See here for a comparison by feature.
In the past three years, I've used Prototype/script.aculo.us and jQuery. From the two, I prefer jQuery.
Generally, everyone uses jQuery these days. I like it pretty well.
You might also check out MooTools. Depending on your past experience, you may find it fits your style better.
I'd personally go with jQuery too. That's what I use these days when I need that sort of thing.
Well documented and a plethora of plugins already available.
From a newbie: I have been using jQuery and it creates big results with only a little skill. The more skill you build with jQuery, the cooler and easier things get.
jQuery supports a lot of selectors, It’s easy to add/remove attributes to any HTML element, makes ajax and json easy to use and has a big helpful community.