Adding css framework to Meteor App - javascript

I'm creating Meteor app, I would like to use one of custom css frameworks i.e. Get Shit Done or Bootflat, but there are no packages for theme in Atmosphere.
Should I create those packages for my own or use standard approach by adding libraries using <link> tag?
Currently I tried second solution, but colors are incorrect.

Meteor will automatically detect CSS files. Just make sure you place them in the client folder. Organize your files according to the file load rules to get the correct hierarchy with your CSS files. Read about file loading here: http://docs.meteor.com/#/full/structuringyourapp
It would be nice though if you could place it in a package and keep it up to date on Atmosphere.

Why not just create your own package for the theme? that way you can use it in your own project and also share it on atmosphere. Here is a nice tutorial on how to create a package and use it locally as well as push it to atmosphere. Meteor package tutorial #meteorchef
Hope this helps!

Related

Using Bootstrap and ng-bootstrap is good?

I have two modules in my angular website , one is "bootstrap" and another one is "ng-bootstarp".
Does both modules are required , or any one is needed?
I am planning to keep only "ng-bootstarp" 4.0.0.0 and to remove "bootstrap"
Is this fine?
Also let me know the steps to remove "Bootstrap" ?
Can i just go ahead and delete the bootstrap from the ng_module folder or do i need to use any commands?
Don't delete it unless it's causing issues, Bootstrap is intended to be installed alongside ng-bootstrap.
Bootstrap is supposed to be installed when using ng-bootstrap, because ng-bootstrap
relies on Bootstrap's CSS, but it replaces everything else that comes with Bootstrap, as you can see in their dependencies. The CSS is then set in your angular.json or imported into the main styles.css
That said, the non-CSS parts of Bootstrap are unused and could be deleted, but if you're using a package manger, e.g. NPM, this could cause issues when updating and you'll need to repeat this process each update.
As pointed out by #Eliseo, an alternative to using the normal Boostrap with everything included is to use bootstrap-only-css, which can be installed using NPM or Bower, details here. This isn't an official Boostrap distribution as far as I can tell, so keep that in mind.
TLDR: there's no good reason to delete Boostrap.
Angular Material is the official UI framework for Angular, and is maintained (aside from open-source contributors) by Google engineers.
The community is fantastic, the documentation is excellent, and all of the components and utilities are designed to be used with Angular specifically. The source is a case-study in how to write code the Angular way.
It is for the reasons outlined above that I picked AM to be our company’s preferred UI framework.
I haven’t used Bootstrap in a very long time and I would not consider using it in a new project now.

How to use Typescript or an UMD module in a WebSite project(not SPA)

Typescript is a great language, but I haven't use it in my project, the reason is that my project is a traditional website with many page (asp.net core MVC), and all tutorial I can found is for SPA (anglerjs,vuejs ect.) and I use many jquery plugins in my project. and I'm confusing about javascript's module system.
and here is my question:
do I must using npm, and how do I configurate it to download package to the folder I wanted ?
how do I load jquery and it's plugin ?
what module loader should i use?
do I must use webpack ? and how to config (multiple output files are needed)
I already try to use typescript without module , and use namespace instead but a problem is that I can't define a repeated public function or variable (sometime I copy and paste code from one to another, and a few file structure similar but not the same (they expose the same variable but they don't in one page))
I know there a lots of question there, but even if you only know one answer of above question, please share you answer to me! it will be really helpful

Ionic3 import external web hosted javascript library

I am trying to create a iOS/Android app based on a client side html5 web project, (i.e. a site) I did.
I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible.
In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script
tag. However, I can't import and use it in Ionic3.
I tried many solutions tagged with 'ionic2' and nothing really seems to work.
It also seems no one knows a general solution for this, since each answer was case-specific.
Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3?
(I would prefer to load from the web, but I am also accepting to download and load it fro file. )
(If ionic isn't the best way of accomplishing my objective, I am open to suggestions)
I think you need to wait till release the Ionic 4 and Stencil.
What is all about Ionic 4 and Stencil?
The magical, reusable web component generator.
Stencil is a tool for building modern Web Components
Stencil combines some of the best features from traditional
frameworks, but outputs 100% standards-compliant Custom Elements, part
of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more
powerful mobile and web apps. Stencil is the foundation for the next
generation of Ionic Framework, but is completely independent of Ionic
or any other UI framework.
Here you can see the official doc.
Nice video about the power of Ionic 4
Nice article about it
First of all have a look at this useful ionic resource, it explains how to add thirs party libraries using npm.
If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. Then you have to tell typescript that your library exists. This is done like so: declar var <library-handle>. Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. This is the tricky part where you may have to try a few things until you get it to work.
You can have a look at my answers here, here and here where I explained how to add different third party libraries to ionic projects.

How to organize Vue-JS : Non Javascript way?

How to organize Vue-JS project [files and directory]: Non Javascript way?
Coming from a non-javascript background, I found Vue.js very intuitive and easy to use. My earlier experience in Javascript is with JQuery and vanilla javascript on the browser.
I created an application using Vue , Vue-components and vue router. Everything works fine.
My problem is, I have ended up writing a lot of code in a single index.html file of my project. This file contains over 10 templates that I have created and attached to different component in my app. I want to know that is there a non-javascript way to organize these templates in seperate files.
I see that there are options using webpack and browserify to modularize the project. But coming from non javascript background, I don't find them intuitive. I don't want to go node - npm way because that has its own learning curve and moreover it downloads a dozen of files and dependencies in my project which I don't understand. I am old school and more comfortable downloading the files and including them in the webpages.
So probably, you understand where I am going to. I need a solution where I could put my templates as separate files and read those files in the different components.
What I have tried :
Declaring the templates inside my components. But writing all that html inside the component is not that clean. It also, makes my JS file too huge. I am better in putting all data in the index.html instead.
Storing template as smaller chunk "homepage.html","about.html" and in my components, using $.get / $.load to read different components in ready function of the component. This works but I still have to fire an additional ajax call for each component which is not efficient.
Please refrain from suggesting the obvious node-npm [webpack and browserify] way. I know thats what is supported by Vue but this needs a learning curve and complete setup. Answer to this question would actually help other developers who hesitate going the node-npm way.
Please shout back if you need more clarifications to the question.
The options you've mentioned are your only real ones... the HTML of the template needs to be available when it's needed, so you either have to have it within your html file off the bat, or load it using AJAX or an in-browser loader like RequireJS (and this extension that allows it to load HTML https://github.com/requirejs/text).
In-file templates make sense for very small projects. As your project grows, you'll need to start using the tools that are built for this. NPM rocks and every JS package that you'll ever need can be included in your project in seconds.
I highly encourage you to try the Vue CLI
It does use node, npm, webpack and downloads dozens of files. Which you've you've explicitly asked for not to use, so let me clarify:
The Vue CLI takes care of the complexity and configures webpack for you.
You don't even have to know it's using webpack.
It's very developer friendly (it even has a built-in gui) and lowers the barrier to entry compared configuring a webpack config.
I hope you'll also find it "intuitive and easy to use".

Meteor and Bootstrap admin

I would like to use meteor with a bootstrap admin, i.e. a bundle including several bootstrap plugins, script and everything typically made as a kind of framework for developing a web application.
Usually those bundles comes with a lot of dependencies, such as external links for fonts, IE hacks as well as their own shipped file of bootstrap, jQuery and other stuff. If we were in a regular php-like framework it would have been fine.
But in order to make such a template be "native" on meteor, I thought to refactor it in such a way that local dependencies (script and css basically) are stored into folders and not loaded via a <script src="…"></script> tag (otherwise the local path would not be found) but I doubt it is really the best practice, this is why I do consider 3 options:
To use the project/public folder in order to store all the bundle's dependencies (as if it would have been in php for example)
I might refactor the bundle's code by removing any script or style tag aimed to import the js or css into the page and add the corresponding js file aside so that meteor will dynamically load it during at runtime
Like in option 2 but instead of using the bundle's jQuery source files I would install the official jQuery's package for meteor (if existing).
The first (1) option should be the quickest one to get something running but it would not be very meteor native. The advantage however would be to keep the code near to the original one and being able to upgrade once a new version of the bundle would be released.
The 2 other options would be much more elegant (especially the third one) but it would involve a lot of refactoring and induce the risk of introducing bugs I did not expected.
My preference for now is the first option one but I'm afraid of not seing the drawbacks of this approach. Does someone have any experience in importing manually the CSS and JS files the "old fashion way" in meteor ? What is the risk of such an approach compared to using the "place in folder to include" way of meteor ?

Categories