I just got access to the new Stencil beta and I have no idea what to do. I have reviewed all of the documentation on the BC developer website, but I don't know how to proceed. I am also not sure if I will even be able to create designs in Stencil since I don't know Handlbars or json - are those programming skills required or can we still rely on CSS and HTML for most design customization? BC told me there is no support for getting set up and to ask in this forum instead.
Normally I would look under the hood of an existing theme to see how it's built and try "learning on the job" but since I can't even get access to the files, I am at a loss. I created an account on GitHub but I have never used it so I don't know where to look for the files (I did a search but there are thousands of files there and I again couldn't figure out where to start). Can anyone point me in the right direction so I can determine if using Stencil is even feasible for my projects?
Handlebars compiles serverside as HTML. You do still have stylesheets, but we are using some SASS custom functions (documented in Stencil docs).
I'd recommend taking a look here: http://blog.teamtreehouse.com/getting-started-with-handlebars-js
Related
I have a webpage that needs to be able to generate and later read barcodes. But i cannot seem to find any small scale addon to aurelia that does even one of these. Is there any libary that does this or do i have to write my own somehow? Or can i somehow use some preexisting barcode stuff that is not directly designed for aurelia?
looks like you have to find a suitable library for the task on npm.
For barcode generation, you can use this test app:
https://codesandbox.io/embed/barcodes-bxgf1
Be sure to adapt to your own bundling choice.
I used quaggaJS in my aurelia app for reading existing bar codes.
(it's actually just a regular JS package - not specially for aurelia)
the API is kind of old (callbacks instead of promises), and overall it's a little weird (the Initialization process), but in the end it works great with little effort.
you can use https://www.npmjs.com/package/qr-scanner only draw back is that your website need to be https.
What is the most elegant way to get a riot based UI today?
i'd love the following points to be addressed:
A proper code-mapping for easy debugging
A good way to bundle the application (so far i used Webpack and JSPM)
It would be lovely if it would work elegantly with Typescript.
Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?
If you have more items for consideration - please add them....
Thanks for asking these questions. I have tried to answer to all your questions hoping they could be useful also to other Riot.js users
A proper code-mapping for easy debugging
the riot compiler generates simply javascript code without modifying too much the structure of your original source code. Any modern browser should be able to provide with debugger breakpoints and console calls all the debugging tools you need. Check for example the stack trace of this error you don't need much more to figure out where it's coming from.
A good way to bundle the application (so far i used Webpack and JSPM)
In this repo we provide 3 different javascript bundle examples: rollup, webpack, riot-compiler. I personally prefer rollup but you can (and should) use whatever works best for you and your team.
It would be lovely if it would work elegantly with Typescript.
The riot public methods are already available as Typescript interfaces:
- https://www.npmjs.com/package/#types/riot
- https://www.npmjs.com/package/#types/riot-route
I am not a typescript user and that's why I will not invest time in making examples in a technology I don't use but PR are welcome
Is it best to use Tag files, or straight JS? If the later, would it be better to use a class that inherit from riot's tag class? If so, can i place the template code in a different file?
I recommend you to just use Tag files because riot was designed as component library and it embraces completely the philosophy of components composition vs class inheritance. If you have code you share across several components you can either use mixins or import it with your bundler directly in your tags see for example
Future compatibility: i saw that there's going to be a change (that "export default" thing) - how would you recommend to write the code for the smoothest migration path?
Riot 3 will be not compatible with Riot 4. (that will be a full rewrite) I can't recommend any best practice to make your code portable to Riot 4. Remember that Riot 3 will be still supported and your code will run even on IE9 for the next 10 years. Once riot 4 will be released and the API will be stable I can provide more hints about a migration path.
We are testing HAML and SASS on a recent project to speed up our development flow.
We built the static front-end, and from here, will be integrating the source into a Wordpress build. HAML isn't going to be used in the WP integration; we only used it to rapidly build the static front-end. However, not that it matters for this question, but we're using SASS throughout the entire build and into the WP integration. We're using Prepros as the preprocessor.
So, when building in PHP, it's pretty simple to use partials to make the front-end build more organized and efficient. No problem.
But we're using HAML on this project -- as an HTML generator -- and would love to integrate the language in all future builds if we can figure everything out. And we're trying everything possible to avoid having to expand into learning Ruby and/or configuring a complex development environment.
Anyways, using the overview above, is it possible to use partials to construct layouts in HAML without over-complexing the build? I've seen many answers relating to yes--and the answers are there--but the background information and semi-documentation just happens to never be there.
If anyone could point me in the right direction, that would be absolutely amazing. Please know that I appreciate any effort and advice from the community!
Thanks again,
B
First off, I'm brand new to Dojo.
I'm integrating it into our existing web app.
We initially only need the Calendar widget functionality.
I'm looking to keep the number and size of files as small as possible.
I don't believe downloading just the base code file will be sufficent?
http://dojotoolkit.org/download/
Additionally, the Dojo toolkit download is a huge zip (Even if I was to only use compressed files)
Am I left with downloading the toolkit and manually removing everything I don't need?
Is there no custom download builder like jquery ui?
Well, the dojo library is much larger than jquery ui and I don't know of an equivalent to the download builder. If you are just interested in using dojo for a single widget, you might consider exploring a different library.
To use dojox/Calendar, you are still going to need the many dependencies it has on other dojo modules. You can do this manually, but it will be tedious.
One thing you can do is run dojo's build system to package dojox/Calendar and all of its dependencies into a single file. This isn't a trivial task and requires a good understanding of dojo's AMD loader and package system.
If you want to go down this route, I would clone the dojo-boilerplate project on github. It contains everything you need to do this out of the box. Then follow the build system tutorial to understand how you set this up. From there you can have your app depend on dojox/Calendar to produce the file you include on your page to consume it.
I suggest that you put the whole thing (yes, it's a lot of tiny files) to your server.
Dojo 1.9 is written so that when users visit, their computers will only download the individual pieces on an as-needed basis. This is possible because every piece (AMD modules) is explicit about what it needs.
Once you have something that works, you can choose speed-up loading times by using the build system. Basically, this involves going: "If the user wants this thing, they'll probably want all this other stuff, so create a big minified lump and give it to them whenever they start asking." Best of all, it doesn't have to be perfect: If you miss including something, the users browser will still request it a la carte.
At work we're using the Dojo Boilerplate starting application which helps give some initial organization to the build process.
I read Scott Gu's article about built-in support for bundling and minification in ASP .NET 4.5.
However there's no mention of embedded resources, which is a pity.
In the past I've been using a Codeplex project called Client Dependency Framework which supported embedded resources.
Seems like a pretty major omission to me. Is support planned?
I'm pretty sure you could write your own transformer to handle this.
Create a class that implements System.Web.Optimization.IBundleTransform.
Then in the Process method get the contents of the embedded resource. This shouldn't be too difficult. This blog post might be helpful.
Then add the transform to the bundle.
e.g.
var bundle = new Bundle("~/Test").Include("~/Content/Site.css");
bundle.Transforms.Add(new EmbeddedResourceTransformer());
Note that I am using the nuget package from System.Web.Optimization, not Microsoft.Web.Optimization (I have no idea why there are two different namespace implementations, and whether the syntax would be the same in both).
I also can't vouch for the performance of doing it this way as opposed to the file system.
Hope that helps!
Just a few comments on above answers since I don't have enough rep. to comment directly...
The answer from Hainesy suggests using a BundleTransform. I believe this is too late in the process to include an embedded resource. The BundleTransform is helpful for converting things inside the css or javascript after the contents are pulled from the original file and before they are put into the bundled file. For example, if you need to modify image URL's in CSS to point to local relative url for dev and to a CDN url for production.
The link from user960567 explains how to use embedded resources, but there's a catch. That process will only work for something like a common control used from another project.
e.g. If you create a textbox that needs CSS and JS then it allows you to create a HTML helper in the common project that will add the textbox and the script tags that pull in the embedded resource into the page. It does not allow you to pull the embedded resource from the common project into a bundle in another project. This will basically create a separate script or style tag for each embedded resource which may not be what you want (at least it's not what I was looking for.)
I've written a detailed article about how you can use the bundle and minification technology to wrap up your external resources here.