guys, I'm new at programming and I'm trying to use some Math properties in my app (I'm using Nativescript, which is pretty similar to React Native). However, there are some specific things that I can't do while using Nativescript that are really easy to do using vanilla JS. I'm talking about Math module. I mean, I just wanna use in my code something like "Math.sqrt(25)" to have "5", and things like that. In Nativescript, for example, I can use some modules by declaring variables. Example: if I want to use frame modules (that are specific from Nativescript), I just have to do this:
var frameModule = require("ui/frame");
But I can't do that with commonJS modules such as Math. Maybe I just don't know the path or something. Anyway, I'll bless anyone who can helps me, thanks!
The Math library is part of your JavaScript and you can easily access it by just using Math in your code. You get an example:
var MathPiNumber = Math.PI;
console.log(MathPINumber); //You will get 3.1415926.....
If you want to know what else is out-of-the-box part of JS you can read it here:
JavaScript Global Objects - Mozilla
For example you can also use Date like in their example shown:
var date1 = new Date('December 17, 1995 03:24:00');
console.log(date1) // Sun Dec 17 1995 03:24:00 GMT...
Related
After spending a few years locked into an ancient tech stack for a project, I'm finally getting a chance to explore more current frameworks and dip a toe into React and Webpack. So far, it's for the most part been a refreshing and enjoyable experience, but I've run across some difficulty with Webpack that I'm hoping the hive-mind can help resolve.
I've been poring over the Webpack 2.0 docs and have searched SO pretty exhaustively, and come up short (I've only turned up this question, which is close, but I'm not sure it applies). This lack of information out there makes me think that I'm looking at one of two scenarios:
What I'm trying to do is insane.
What I'm trying to do is elementary to the point that it should be a no-brainer.
...and yet, here I am.
The short version of what I'm looking for is a way to exclude certain JSX components from being included in the Webpack build/bundle, based on environment variables. At present, regardless of what the dependency tree should look like based on what's being imported from the entry js forward, Webpack appears to be wanting to bundle everything in the project folder.
I kind of assume this is default behavior, because it makes some sense -- an application may need components in states other than the initial state. In this case, though, our 'application' is completely stateless.
To give some background, here are some cursory requirements for the project:
Project contains a bucket of components which can be assembled into a page and given a theme based on a config file.
Each of these components contains its own modular CSS, written in SASS.
Each exported page is static, and the bundle actually gets removed from the export directory. (Yes, React is a bit of overkill if the project ends at simply rendering a series of single, static, pages. A future state of the project will include a UI on top of this for which React should be a pretty good fit, however -- so best to have these components written in JSX now.)
CSS is pulled from the bundle using extract-text-webpack-plugin - no styles are inlined directly on elements in the final export, and this is not a requirement that can change.
As part of the page theme information, SASS variables are set which are then used by the SASS for each of the JSX components.
Only SASS variables for the JSX components referenced in a given page's config file are compiled and passed through sass-loader for use when compiling the CSS.
Here's where things break down:
Let's say I have 5 JSX components, conveniently titled component_1, component_2, component_3, and so on. Each of these has a matching .scss file with which it is associated, included in the following manner:
import React from 'react';
import styles from './styles.scss';
module.exports = React.createClass({
propTypes: {
foo: React.PropTypes.string.isRequired,
},
render: function () {
return (
<section className={`myClass`}>
<Stuff {...props} />
</section>
);
},
});
Now let's say that we have two pages:
page_1 contains component_1 and component_2
page_2 contains component_3, component_4, and component_5
These pages both are built using a common layout component that decides which blocks to use in a manner like this:
return (
<html lang='en'>
<body>
{this.props.components.map((object, i) => {
const Block = component_templates[object.component_name];
return <Block key={i}{...PAGE_DATA.components[i]} />;
})}
</body>
</html>
);
The above iterates through an object containing my required JSX components (for a given page), which is for now created in the following manner:
load_components() {
let component_templates = {};
let get_component = function(component_name) {
return require(`../path/to/components/${component_name}/template.jsx`);
}
for (let i = 0; i < this.included_components.length; i++) {
let component = this.included_components[i];
component_templates[component] = get_component(component);
}
return component_templates;
}
So the general flow is:
Collect a list of included components from the page config.
Create an object that performs a require for each such component, and stores the result using the component name as a key.
Step through this object and include each of these JSX components into the layout.
So, if I just follow the dependency tree, this should all work fine. However, Webpack is attempting to include all of our components, regardless of what the layout is actually loading. Due to the fact that I'm only loading SASS variables for the components that are actually used on a page, this leads to Webpack throwing undefined variable errors when the sass-loader attempts to process the SASS files associated with the unused modules.
Something to note here: The static page renders just fine, and even works in Webpack's dev server... I just get a load of errors and Webpack throws a fit.
My initial thought is that the solution for this is to be found in the configuration for the loader I'm using for the JSX files, and maybe I just needed to tell the loader what not to load, if Webpack was trying to load everything. I'm using `babel-loader for that:
{ test: /\.jsx?$/,
loader: 'babel-loader',
exclude: [
'./path/to/components/component_1/',
],
query: { presets: ['es2015', 'react'] }
},
The exclude entry there is new, and does not appear to work.
So that's kind of a novella, but I wanted to err on the side of too much information, as opposed to being scant. Am I missing something simple, or trying to do something crazy? Both?
How can I get unused components to not be processed by Webpack?
TL;DR
Don't use an expression in require and use multiple entry points, one for each page.
Detailed answer
Webpack appears to be wanting to bundle everything in the project folder.
That is not the case, webpack only includes what you import, which is determined statically. In fact many people that are new to webpack are confused at first that webpack doesn't just include the entire project. But in your case you have hit kind of an edge case. The problem lies in the way you're using require, specifically this function:
let get_component = function(component_name) {
return require(`../path/to/components/${component_name}/template.jsx`);
}
You're trying to import a component based on the argument to the function. How is webpack supposed to know at compile time which components should be included? Well, webpack doesn't do any program flow analysis, and therefore the only possibility is to include all possible components that match the expression.
You're sort of lucky that webpack allows you to do that in the first place, because passing just a variable to require will fail. For example:
function requireExpression(component) {
return require(component);
}
requireExpression('./components/a/template.jsx');
Will give you this warning at compile time even though it is easy to see what component should be required (and later fails at run-time):
Critical dependency: the request of a dependency is an expression
But because webpack doesn't do program flow analysis it doesn't see that, and even if it did, you could potentially use that function anywhere even with user input and that's essentially a lost cause.
For more details see require with expression of the official docs.
Webpack is attempting to include all of our components, regardless of what the layout is actually loading.
Now that you know why webpack requires all the components, it's also important to understand why your idea is not going to work out, and frankly, overly complicated.
If I understood you correctly, you have a multi page application where each page should get a separate bundle, which only contains the necessary components. But what you're really doing is using only the needed components at run-time, so technically you have a bundle with all the pages in it but you're only using one of them, which would be perfectly fine for a single page application (SPA). And somehow you want webpack to know which one you're using, which it could only know by running it, so it definitely can't know that at compile time.
The root of the problem is that you're making a decision at run-time (in the execution of the program), instead this should be done at compile time. The solution is to use multiple entry points as shown in Entry Points - Multi Page Application. All you need to do is create each page individually and import what you actually need for it, no fancy dynamic imports. So you need to configure webpack that each entry point is a standalone bundle/page and it will generate them with their associated name (see also output.filename):
entry: {
pageOne: './src/pageOne.jsx',
pageTwo: './src/pageTwo.jsx',
// ...
},
output: {
filename: '[name].bundle.js'
}
It's that simple, and it even makes the build process easier, as it automatically generates pageOne.bundle.js, pageTwo.bundle.js and so on.
As a final remark: Try not to be too smart with dynamic imports (pretty much avoid using expressions in imports completely), but if you decide to make a single page application and you only want to load what's necessary for the current page you should read Code Splitting - Using import() and Code Splitting - Using require.ensure, and use something like react-router.
I converted our Meteor site to support two languages, Dutch and English. To do this I made two folders for our templates (en and nl) and hooked everything up to our templating system so the router serves things correctly depending on which site you're on. The main body template is dynamic:
Template.body.content = function() {
var lang = Session.get("lang") == "en" ? "en_" : "";
var page = Session.get("page") || "home";
// if the template for the current language doesn't exist,
// fall back to Dutch version or show a 404
var template = Template[lang + page] || Template[page] || Template[lang + "error404"];
return template();
}
Everything works pretty well except that I have to write the following to expose a template value to both languages:
Template.en_foo.bar = Template.foo.bar = function() {}
For an example of this code as used in production, see our client-side blog code.
What's an elegant way to avoid this approach while still accomplishing the goal of a multilingual site?
What about this:
make a custom subscription and pass the language argument to a custom publish
the custom publish function returns only the selected language (optionally you can provide fallbacks if content is unavailable)
use just one template for all languages, filled with the right language from the subscription
use i18n package for the UI strings
Multi-languages applications is on the Meteor roadmap but it's planned in a long time...
Meanwhile you can use this atmosphere package.
I'd recommend heavily against keeping translated versions of your templates around. Unless your site is tiny. It might not seem so bad at first because you just copy them and translate the contents. But from then on you'll have to maintain both versions on any change, test both. And then somebody will suggest adding that third language and boom, triple damage to your brain.
We're using meteor-messageformat for translations. It comes with an interface that allows creating translations without having to look at template code. Anybody can translate.
At work I've been asked to make a small web based mini-game prototype.
I went down the flash route and am using Flash Develop with Flex SDK.
I've also found a graphical framework and I can use that no problem, but I'm trying to make my own code reusable at a later date.
I have written a small class for loading a list of textures, from names supplied to the class before loading. It is here to keep the question concise.
To be honest when it comes to Flash/ActionScript, I have no idea what I'm doing, I only started using it a week ago.
What I want to know is whether my attempt is acceptable from a more experienced AS programmer's point of view. Is it really bad flash coding practice? Does flash handle garbage collection? Should I be keeping an eye on the new Loader() calls that I just disregard?
First of all make loader as field of your class and reuse it. Then add error listener:
addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
Also you should check input data:
public function addImage(fname:String):void {
if(fname && fname != "") array.push(fname);
}
When all images were loaded you should "reset" you loader:
array = [];
And it would be better if you will check the state of your loader to prevent unpredictable cases:
public function beginLoad():void {
if(state == ALREADY_LOADING) return;
count = 0;
loadImages(count);
}
ps immutable fields such as loader, map, array mark const. It's not mistake but other developers will know that these fields are immutable.
I'm still wrapping my head around Node, but I have a very simple question. I see a lot of node examples where people are declaring their routes and all their logic in a single app.js file (or sometimes splitting them off into subfiles).
My question is basically: is it better to keep all your route declarations in the app or bootstrap a generic route that maps to your file structure. This may seem like a primitive question but my goal is to grasp what's most efficient within node.
I'm currently building an API handler with Restify but I have another app that uses Express (so this question will likely answer both questions).
In my route I can either declare a single route bootstrap like so:
app.all('/api/:package/:controller', function(request, response) {
var controller = require(
'../' + request.params.package + '/api/' + request.params.controller
);
controller.index(request, response);
response.end();
});
This basically accepts all calls from the API and targets the proper api controller. Alternatively I can declare each route individually or perhaps even write an loop that goes through each of my controllers and declares them on init. So:
for (var i in packages.controllers) {
app.all('api/' + package + '/' + controllers[i].name, function(request, response) {
var controller = require(
'../' + request.params.package + '/api/' + request.params.controller
);
controller.index(request, response);
}
}
packages.controllers being an array of all possible controllers. Note the above code is not accurate, I have an HMVC folder structure so the code is a bit more complicated than the above. But you get the point.
I'm wondering what the consequences of either are and if it really matters at all?
Thanks!
I would not recommend a single app.js at all. You will end up with a 5,000+ line file which is a nightmare to maintain.
The largest issue I see with your snippet is that even though require() gets cached, it has to perform a synchronous IO request. It's just a bad habit to get into.
Similar to what Don recommends, I have had the best luck splitting out routes into modules which export a single function which accept an instance of the app. You can think of it as "decorating" the app instance:
// app.js
var app = express.createServer();
app.configure(function(){ //... });
require('./foo')(app);
// foo.js
exports = module.exports = function(app){
app.get('/whatever', function(req, res){});
};
The exploding app.js file prompted a couple of us to create a small reference app to codify a standard Express app structure. It's not rocket science, but rather a set of conventions that makes things more organized.
You can find it here: https://github.com/EAAppFoundry/tableau
We'd love suggestions/pull requests if there something we got wrong or is missing.
I don't think there should be any real problem with looping through the directory tree and generating the routes. However, it'll be hard to define route based middleware and other routing features (such as variables in the routes) in a nice way.
I wrote a library that I use to define my routes declaratively and with minimal repetition which you might be interested in. It's inspired by Rails resourceful routing and is pretty flexible - the idea is to build a hash of routes and subroutes; there are also facilities to define groups of routes, middleware and variables.
https://github.com/cheesun/express-declarative-routing
Although it doesn't automatically generate the routes based on your directory structure, I think that'd be a cool feature and welcome you add it to the library.
I'm fairly new to Joomla (I've been more of a Wordpress guy) and I have a question about module positions.
Can a module know what position it's in. For instance can I do something like this:
if(modulePosition =='left'){
Do this...
}else{
Do that...
}
It seems easy enough, but I've searched for hours and can't find anything that will help me with that. I know there is a countModules function but from what I can tell, that just checks to see if the module is active or not.
Thanks for your help!
I found the answer! Mostly thanks to #Hanny. His idea of using the modules id got me googling for that and I came across the answer. For anyone else that happens to be looking to do something similar here it is.
You use a global variable $module (who'd a thought, right?)
So my code now looks like this:
$class = '';
if($module->position == 'position1'){
$class = 'class1';
}
and so on...
Pretty simple, huh?
To find out what else you can do with the global variable $module just put this in your code and see what info you can use:
echo(print_r($module));
Thanks for all your help!
The short answer is 'yes', you'll assign a module a position based on your template. When it shows up you can have conditionals like that regarding that position (different templates have different naming conventions for positions, so make sure you know what they are before coding).
For example, some use "Position12", others may use "leftcol", etc. You just have to check in the template files to see (you can check the .xml file in the template directory to see the positions listed in the template, or look in the index.php file for the jdoc includes).
In some of my experience, the only time you'll really ever need code like that is in the core layout files of the template (for example, if you have different widths of columns depending on modules being present or not), otherwise there won't really be a time where you 'may or may not' have a module showing up - because you'll explicitly be telling them where to be and when on the back end.
I tried to comment under john's solution but I don't have a enough rep points-- I wanted to add it doesn't matter what you name the module position in your template case-wise the position name you get back from $module->position is always all lowercase regardless of how you named the position in the template... ie. in your template xml somewhere you might have topBar position will be named 'topbar' not 'topBar' when you try to check it with
if($module->position == 'topBar') //always false... use instead
if($module->position == 'topbar') //what you need to use
I'm going to disagree with Hanny. I think the answer is no, not as you describe.
The template knows when it has reached a module position, and it gets a list of modules assigned to that position, then calls for them to be rendered. But it doesn't pass that information on. It's not stored in JApplication or JDocument etc either (like, nothing stores where in the template the rendering is up to or anything).
There are some hacky ways to almost get what you want though. If you know the template positions you need to search (sadly there's no easy method for getting this from the template - otherwise you could parse your template's .XML file for <position> elements...), then you could do something like:
<?php
$positions = array('left', 'right', 'top', 'bottom')
$found_in = false;
foreach ($positions as $cur_position)
{
$module_positions = JModuleHelper::getModules($cur_position);
foreach ($module_positions as $cur_module_in_pos)
{
if ($cur_module_in_pos->module == 'mod_MYMODULE')
{
$found_in = $cur_position;
}
}
}
if ($found_in)
...
Of course, this doesn't work well if your module is included multiple times on the page, but maybe that's an assumption you can make?
Otherwise it'd be up to hacking the core - you could use a JDispatcher::trigger() call before the template calls a module, set some var etc. Unfortunately there's no such event in core to start (a pre_module_render or something).
A module instance is assigned to a single position and this is stored in the database and normally you would style the position in the template. A module instance can only be assigned to one position. So while it's an interesting question, it's not really a practical one.
The exceptions to this are the following:
loadposition ... you might want to know if a module is being loaded using the plugin because this would put it potentially somewhere besides the styled area for the position. THough i would recommend always making a new instance for this precisely so you have more control.
loadmodule ... module loaded by name using the plugin. In this case again you are probably better off making a new instance of the module and styling it. Also I'd put it in a span or div anyway, depending what it is.
jdocinclude:module ... loading a module directly in a template. Again if you are doing this I would wrap it in a span or div. In this case you are also allowed to include a string of inline styles if you like that kind of thing.
Rendering the module to a string and echoing it, again that is basically a very customized solution and you would want to set the styles and options.