Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm planning to use Material-UI CSS framework (http://material-ui.com) in order to design front-end of a website, but I don't have any idea about how to use this framework.
I'm not familiar a lot with NPM, Browserify, etc. I just need to know how shall I start in order to learn the way to use this CSS framework.
Thanks for any help!
Don't be intimidated by the (apparent) complexity of webpack and other (great) build tools, and don't be discouraged by envious jerks who say things like "To be honest, I think you got a big problem to use this stuff."
The reason why the material-ui implementation (usage) is based on these tools is because is currently the best way to write software and understanding this and other frameworks is a great way to learn why this is the "right" way, and become proficient at writing quality modular code.
Webpack, and the other build tools, exist for one purpose: to create one "main" file from your app's source code that can be read and delivered to your users' browser in an efficient manner. Long gone are the days when we would write a bunch of include (script) tags for every resource (file) we need in our pages and thus have our users wait until all these were downloaded from our server (or multiple locations e.g.: cdns) and then the page would load. The efficiency is based on the fact that you can deliver one (often minified/compressed) file that contains all your code and any code it depends on (e.g. React or even jQuery).
Build tools accomplish this by asking you 3 things: what file to start with (entry main file), what tools (loaders) to use to process non-native JavaScript code within your code (scss, jsx, etc) and what file to create as the result (converted and minified output). This output file will be the one you use in your html import/script tag. It will contain your code plus all other dependencies, which would be a nightmare to include and resolve manually yourself. Here is a good beginners' guide.
Material-ui, like many other frameworks (reason why I took the time to explain all of the above) is built with modularity in mind: pieces of code can be "glued" or "pieced" together like Legos, in order to easily build bigger parts. You do this by simply including the components you need in any component you create. They are React components which are a simple way to define (write/create) the "building blocks" of your site/app. There are tons of great videos and tutorials to get you started with React (my favorite is reactjsprogram.com by Tyler McGinnis).
To get you started with material-ui, they have created a couple of examples to get started using webpack. Follow the simple steps to install npm and the dependencies (you can find them in package.json) and open the /src directory in your editor. You'll figure it out in no time.
You are in the right track with the right attitude by asking questions, learning to be a good developer, researching and trying to find the easiest way to accomplish your goal.
Had pretty much the same problem. Wanted a simple way to start using material-ui without the gibberish. Here's what I did:
npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js
This gave me a javascript file, material-ui.js, I could then include in my HTML. In my case I'm using electron, so this is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="content"></div>
<script>
require('./material-ui.js')
</script>
<script type="text/babel">
import React from 'react';
import FlatButton from 'material-ui/lib/flat-button';
const FlatButtonExampleSimple = () => (
<div>
<FlatButton label="Default" />
<FlatButton label="Primary" primary={true} />
<FlatButton label="Secondary" secondary={true} />
<FlatButton label="Disabled" disabled={true} />
</div>
);
ReactDOM.render(
<FlatButtonExampleSimple />,
document.getElementById('content')
);
</script>
</body>
</html>
Material-UI is a set of React components in addition to being a CSS framework. I don't know if you can get much use out of it without understanding React.
The easiest way to get started is to install the examples and start from there.
If you don't want to deal with a frontend framework like React, and just want CSS and JS files with a setup time as quick as Bootstrap, check out the Materialize library.
To be honest, I think you got a big problem to use this stuff.
Firstly, it depends on Facebook's View framework called React so you have to know well some basic things.
Secondly,React is totally a javascript stuff and if you use it by coding plain javascript, that would be an other big problem which may stop you.otherwise if you use it's syntax sugar called jsx, you still need to pay plenty of times to learn well it so that you could know how React work and then you could use it in your project.
Thirdly, before the above mentioned happen, there are still several things required that you dont need to know well NodeJs or webpack or NPM but at least you should know well how to use them as the simple tools.
So, is it a must that you have no other choice but have to use this stuff and only act it as a simple css framework?
If not! you can give up now except you are ready to learn tons of dependencies!!!
If yes! I advice you to install nodejs first and then install npm and then use npm to install react maybe you still need to install some tools like babel browserify or webpack(the best) and then dive into React and then you could begin learning how to use MUI~ sounds...mass
There isnt a quick pickup way for MUI just like they said!
If you use the react+redux, you can use the
https://github.com/takanabe/react-redux-material_ui-boilerplate
template.
I wrote a sample node project showing how to bundle a react component for consumption in non-react websites using webpack. It's a similar approach to dkantowitz's, except it removes the need to introduce react or reactDom to the consuming website.
The example as it is would need to be extended to allow use with multiple components (like material-ui is) but I think it provides a good starting point for seeing whats involved with webpack and babel etc
Related
This is my first time using NodeJS so I apologize in advance if this is a noob question.
I want to build a NodeJS chess app where the user can play the computer, but the computer's moves are calculated on the backend. I've been trying to get chessboardjs to work, but I can't get much further than displaying a completely static start position. I'm using EJS to render the view. Here's what I've got so far:
<%- include('_header') %>
<link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-1.0.0.min.js"></script>
<center>
<h1>chess app</h1>
<div id="board" style="width: 400px"></div>
<script src='js/board.js'></script>
</center>
<%- include('_footer') %>
and board.js contains exactly the code from https://chessboardjs.com/examples#5001 (for now, random moves will suffice, I just want to figure out how to get this to work on the backend). Also, how exactly should I go about integrating chess.js? The tutorial completely skips it but I have no clue where to start on that.
Thank you in advance for your help! I really really appreciate it.
Generally, games have a certain number of things you need to manage like current state, game loops, etc. This state ideally live on the client side and persisted on the serverside periodically. So i feel since there is no backend code and there's isn't much info here, i suggest you start with a simpler game, react website had a tic-tac-toe tutorial if you are familiar with react that would be a good starting point to understand game development in general. Then i would recommend this book it has an excellent chapter on developing a browser game.
https://eloquentjavascript.net/
Now specifically for chess, we have something called a chess engine which processes the current state and suggests moves like stockfish which is a very complex and not something a newbie can implement
I'm writing a documentation with angular.
For now, i duplicate twice the code. Once in the button.component.html to make the componenbt appear, and the other is injected from the button.component.ts as a string so it's not interpreted.
The goal is to show the result you will get if you tips the code contain in pre balise.
I need to avoid these duplication cause when a component change, i need to modify twice the code.
I first have use to simulate include comportement but it's not working as the final content is the generated content and not the original content.
Then i checked how angular material perform for their documentation, and it's same to be a bit tricky and complicated for me has they inject their component as dependancies.
I'm asking if there is a sample way to avoid this duplication content and if someone have faced the same issue.
I have only one idea, it's to run a shell commande in the end of ng build with webpack and node, and get the content of the target block and inject directely in the target balise.
Sample :
<div class="my-5" data-source="myButton">
<button mat-button>
<mat-icon class="icon-left">help</mat-icon>
Support center
</button>
</div>
<code data-target="myButton"></code>
But i'm not very sur about that solution.
Thanks in advance.
Kevin
For people who have face the same problem, there is the module you have to use :
exemplify-angular
It's do the job perfectly.
Kevin
Is it possible to access a (Polymer) web component's dependency (also a component) which the only thing it does is load a js script, and override that with another (newer version in my case) script?
Concrete problem: I'm using various Polymer elements (say paper-dialog for example) which use neon-animation whose different animations all import the web-animations HTML which loads the script I want to override.
In other words I would like to perform something like what the /deep/ combinator does for CSS to penetrate into this specific HTML 'component' and add a newer version of the web-animations-next-lite.min.js script.
As for the why: the idea is to use a Chrome extension to perform this since remote update is not an option (internet connectivity limitations). I need to do this since with Chrome v54 our app "broke" (since we use an older web-animations version) by fixing the WebAnimations API so these errors broke animations and with that functionality (popups not appearing).
I already tried injecting the newer version script in my main HTML body with Chrome extension's content script but didn't have any luck there..
Thanks in advance for any ideas!
I know its a bit of a hack, but can't you just put your own version of the web-animations script in bower_components. The problem with trying to alter the polymer element in place is that it will have already loaded the script before you can get at it.
Listen to the load event on you HTML Imports <link>, then add a <script> element with the right src attribute.
It's this last downloaded (and parsed) script that will be taken in account.
<script>
function loaded() {
//file.html loaded
document.write( '<script src="new-file.js"></script>' )
}
</script>
<link rel=import href="file.html" onload="loaded()">
I'm using Ember.js and Handlebars.js for a project I'm working on at the moment. Server-side is Node.js + express and I make use of the Jade templating engine.
Now, whenever I want to tie actions to DOM elements, I use the {{action}} attribute of Ember.js. Currently, this is how my code looks in Jade:
script(type='text/x-handlebars', data-template-name='frontpage')
div.logo(''='{{action goToFrontpage}}')
The above does work, however, the ''='{{action goToFrontpage}}' part seems somewhat hackish.
Is there any other way of doing this? Perhaps a best-practice when combining Ember.js, Handlebars.js, and Jade?
Sometimes it's better to just use html in Jade.
<div {{action GoToFrontpage}} class="logo"></div>
An other example I see a lot is the strong tag.
.stuff
| This is an
strong important
| message.
You can write this
.stuff This is an <strong>important</strong> message.
I find the second a lot more readable and concise.
For last two years I have been programming extensively with jQuery and ExtJs. I think now it's time for me to invest some time in learning the impressive YUI library.
In terms of learning from scratch what is advisable?
I dont plan to use YUI 2 at all in any of my future projects I will use only YUI 3. Is there any paradigm shift in riting code for YUI 2 and YUI 3? or is it only about some cosmetic changes ?
YUI2 and YUI3 are really very different. As different as plain javascript vs jQuery.
Here's an example of setting the background color of all elements of a given class to red to illustrate the difference.
First in YUI2:
<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo/yahoo-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/dom/dom-min.js"></script>
<script>
var YDom = YAHOO.util.Dom;
YDom.setStyle(YDom.getElementsByClassName('test'),'background-color','red');
</script>
Now in YUI3:
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node',function(Y){
Y.all('.test').setStyle('background-color','red');
});
</script>
Notice the main differences:
In YUI2 you include the needed modules yourself using the <script> tag. In YUI3 you only include one script file with the <script> tag and load all the rest using YUI().use. In the example above we use the node module in YUI3. YUI2 does have a module that can do the auto loading but it is a separate module itself and not built-in to the YAHOO global object.
YUI2 is traditional imperative programming: foo(bar()) while YUI3 uses chaining.
YUI3 forces you to write all YUI related code inside a function therefore running in its own scope and exposes only the YUI object to the global scope. This is basically ninja mode in other libraries.
Learn YUI 3, it is the future of the library. It's also a huge leap forward in terms of usability and flexibility from YUI 2. At this point learning YUI 2 unless you really have to is going to be wasted time.
Yes, definitely YUI3... It has great performance enhancements compared to YUI2.
Since you mentioned you have been extensively using jQuery already, this link might help you pick up YUI3 faster----listing the most frequently used YUI3-equivalents of jQuery modules
http://www.jsrosettastone.com/
Hope that helps..
For other people who flock to this page in search of answers, here are a bunch of videos from the YUI blog to get started on YUI3.
Eric Miraglia’s Welcome to YUI 3
and more videos here - http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/
You can find more documentation on YUI3 library here http://yuilibrary.com/
YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.
YUI is a library of JavaScript utilities and controls for building richly interactive web applications using techniques such as DOM Scripting, DHTML, and Ajax.
Fast
Modular Architecture / Dependency Management
Component Infrastructure
Event System
DOM Interaction,Ajax,Many Widgets
Great Documentation
YUI App Framework
Is Open Sourced
Is Developed by Yahoo and the YUI community
Is based on YUI3
Is inspired by Backbone.js
Gives you a basic structure for front end heavy web applications
More About YUI