I am creating an extension for the first time and I saw some extensions on github like this one and noticed that he coded his extension using a boilerplate. To be honest, I didn't even knew that you could use boilerplates (a friend told me), it's my first time reading about it.
I wonder if I should clone some github repository and copy paste my files and work in it. I see that there are some boilerplates that give cross-browser support for your extension.
I am a little bit confused as I don't know if this is the right way to do it. Right now I don't need something huge for my extension because it's a simple one and I'm learning how things work (kind of new to webdev). I might want to add some google analytics to my extension later.
Would you advise me to use some boilerplate? To me it looks tidy but I can't understand most of the stuff that's happening around, would be difficult to modify some files.
Also, most of the boilerplates are for react, is there one that is like the most basic one for vanillaJS... like how can I find the one that is used in the repo link on top of the post?
Related
I've seen a few other questions that are similar to this question I have, but don't have the answer I am looking for.
I building a website for coding courses (I know there are a lot of them out there already, but I am building it to include all the things I like about the ones already built), and I want to allow people to write code, and be able to share it with others (I know Khan Academy does this, but only for HTML/CSS/JS and [a modified version of] Processing.js, and I know that Replit.com does this for almost every language there is, but I want to have this on my website, if not too difficult).
There are two main problems that I am facing:
I don't know how to make it run (except for JavaScript, HTML, and CSS, these will be pretty easy to get running since browsers run them).
I don't know how to limit the use to make it safe to run (I know Khan Academy limits what things you can use in the code, but I don't know what kind of things that I would need to stop from being run).
If I can just do the Web Frontend Pillars, that will be fine, but I at least want to know what and how I can stop unsafe code to be run.
I just had a thought... I don't know a whole lot about it, but if the code (at least JavaScript and HTML/CSS/JavaScript) is run inside an <iframe> will this be safe? Or is it still just as unsafe?
I'm working on the first production release of a large site developed in PHP (Phalcon), MySQL & JQuery. It's not API based although there will be an API available for some things. The slightly dated stack is due to the fact that the project was first prototyped years ago and for reasons I won't bore you with, it's taken years to get to the production development stage.
I realise that hard page reloads are so last year, but they also make sense in an application of this scale when navigating to a different section that serves a different purpose. As it works at the moment, once you get to a section, it pretty much behaves like a single page app using hashed URLs and ajax to change the content in one or more containers etc. especially where SEO is not an issue. This is all currently done with JQuery which is starting to get a bit messy and unmaintainable. There's also features such as notifications in the nav bar etc that appear on every page on the site, again updated and displayed via ajax.
My expertise is in PHP. The same can not be said for Javascript! But it's clear that JQuery alone is not enough. I need a JS framework to handle templating/binding, local routing to a reasonable depth and http etc. with an MV..? structure to better organise the JS side of things and keep it maintainable. I greatly disliked Angular 1 and quit learning it as soon as I found out that Angular 2 was about to come along with major breaking changes. I tried Angular 2 beta and although better, it just doesn't float my boat. I had previously stumbled upon Aurelia alpha and although I didn't have a chance to play with it, watching the vids and reading about it, it seemed like a very nice bit of gear - nice syntax, designed for the present and the future and so on. Now at version 1 beta there's more documentation and resources available to learn it, and I feel fairly comfortable jumping aboard early and using it in this project.
I'm pretty much aware of what Aurelia can do, and I have a lot to learn. However, my big stumbling block at the moment is figuring out how to structure it and incorporate it into this project.
Integration
Each section of the site will need different Aurelia apps
Multiple Aurelia apps may be needed per page
Some Aurelia apps will be required on all pages
I found an article by Patrick Walters which seemed to explain how this could be done by naming the app when you call it on the element;
<body aurelia-app="main" start="app">
Then setting up a shared main.js with;
aurelia.start().then(a => {
let start = a.host.attributes.start.value;
a.setRoot(start);
});
That seemed to make sense so I tried it, but placing the call in a div instead of the body. That doesn't work as host can not be resolved to anything (my IDE told me that before I even ran it). We don't need hostname/port info here, so I presume the author means to replace host with the element? But how exactly?
Any further advice on integration like this would be much appreciated.
I have seen answers to similar questions on SO, but they do not seem to reuse main.js but duplicate it instead which doesn't seem right.
Structure
I played around with moving files with src to subdirectories to split things up into some clear structure. The only way I could get that to work was to add a named path for each in the config e.g. "welcome*": "dist/welcome/welcome*",. Is that the best/only way?
I don't think there is a right answer for your question. Only you are capable to decide which strategy fits better in your situation. As far as I can see, you can achieve this strategy with Aurelia. However, I'm not sure about the reusage of main.js.
You can load an aurelia app inside an specific tag using:
aurelia.start().then(() => aurelia.setRoot('my-root', document.getElementById('some-element'));
If you want to load more than one app in the same page, you'd need 2 main.js files. This thread Multiple Aurelia apps on one page has a very useful example of two apps in the same page.
In my understanding, apps that share the same page should have one project structure, it means only one config.js, src folder, dist folder, etc. Apps that do not share the same page should have a different project structure, with a different config.js, src folder, dist folder (a different Aurelia version if necessary). That guarantees the independence of one app to another, preventing breaking changes.
Of course, that is only my opinion. You can wait for the aurelia guys for further instructions, they are always around.
Hope this helps!
Completely new to Stack Exchange. Trying to learn programming, so checking out various websites and their JavaScript files. When I look at them, the look like a complete mess. E.g. If I go to Airbnb.com and view source, then look at the JS file (toward the bottom), then open it, it's a real mess. Others I look at around the web are similar. Is there a way to format this code to make it neater? (hopefully automatically e.g. if I copy/paste it somewhere?)
Here's an example
easiest way, beautify it with: http://minifybeautify.com
Your Examplecode is minified. There are many tools (http://jsbeautifier.org/) and plugins for IDEs to beautify it.
Many site uses uglify/minify methods to load scripts faster.
You can use a js beautifier to generate more readable code, but you should know that after minify method many var names are shorter so the code will not return to his original form
The reason why it looks like this is because it has been minified and concatenated.
To get started with JS I would recommend to start from books or posts. Also the structure of the files will change depending on the the frameworks you are using. It will be hard for you if you start learning about programming just by looking at the code of some random website.
A book I would recommend you to start with is this one :
JavaScript: The Good Parts
There is a very interesting repo at github which contains a series of books that you can start reading to start understanding pure javascript which is:
https://github.com/getify/You-Dont-Know-JS
If you want to read about a js framework you could start with Angular or React among others.
And finally although it may sound obvious you could just type "JavaScript getting started" in Google and you'll see plenty of posts to start reading and having a better idea of what JS is about.
After you understand it I would say that you can go and see in other pages how they are solving certain problems but I would not recommend to start from there.
Hope it is useful for you
Best
I'm pretty new to TextMate and I just can't figure out how to make JSDoc like comment when editing .js file. I'm using the PHP bundle and there it is pretty easy - I just type doc and then tab. I've already added custom snippet but the problem is that it does not handle new lines properly (it doesn't insert trailing *).
You'll need to install a JSDoc bundle, but it doesn't look like there's much available. A quick google search did bring up something though: https://github.com/tysontate/javascript-jsdoc-tmbundle
No idea if it's any good, and it actually says that the commands don't yet work, but it appears to have seen at least some activity lately (unlike the others I found). It looks like there just aren't that many people who are using JS Doc (or, at least not that many TextMate users who are using it).
Usually, googling for "something bundle textmate" will yield the right results, but apparently JSDoc just isn't that commonly used.
However, maybe someone has added some JSDoc functionality to the existing JavaScript bundle (much like you've started doing). Didn't try looking for that, but you might get lucky.
But hey, it's a good excuse to get your hands dirty (and learn a lot about TextMate in the process) by messing around with whatever the available bundles have to offer, maybe even fixing a few bugs, and giving something back to the community (you don't have to of course, it's just a suggestion).
Not much of an answer, but hopefully you'll find our way from here
An updated bundle with tools for editing JSDoc comments in TextMate 2 is available at https://github.com/rootworkit/JsDoc-Toolkit.tmbundle
I've recently fallen in love in WebStorm as an IDE for JavaScript development. The problem is, I come from a world of vim and lightweight editors, so I probably can't fully appreciate all the power that comes with IDE. Yes, I've seen the presentations and read the docs, but there's a lot of features and I'm not sure which of them are truly useful.
So, here goes my question: how do you use WebStorm and what do you find most useful? Any power-usage tips? Configuration hacks? Plugins worth mentioning?
I'm not looking for a list of features, I'm looking for a real-world usage examples and impressions.
PS. I work mostly with pure JS + Canvas element and some NodeJS.
Some random thoughts, maybe more later....
In the help, definitely read the Basic Concepts and skim the WebStorm Usage Guidelines for actions that you care about.
Learn to use Ctrl-Shift-A. It allows you to 1uickly find actions you can do by typing part of them. With that you can find anything once you know it exists.
WebStorm's (like IntelliJ) best magic is its code completion and refactoring features, which come from its code parsing and awareness. It figures a lot of stuff out, but you can help it out by making you have good source files. Put the commented versions of the libraries you use in your project so it can use those comments to display in the doc popups (just having them in the directory is all you need).
Be sure to leave the tips on.
Their forums are useful, but if you have a problem or feature request put it right into youtrack.com. They are much more responsive there. You can also vote for the stuff you want added.
And if you haven't seen it yet, there is a VIM plugin which will give you VIM editor keys, called IdeaVim.
Features I find most useful:
Code formatting. WebStorm's formatter is the best I've seen (of course, it still has some subtle bugs).
Built-in HTTP server: http://blog.jetbrains.com/webstorm/2013/03/built-in-server-in-webstorm-6/, How to open/debug current file using built-in Web server in WebStorm?
JsTestDriver integration.
Plugins. You can always find something useful.