im currently creating an app where the user is suppose to click a couple of buttons and get a chart back. So far so good. But I want them to be able to save the chart in their profile so they can look at it whenever they want. I have no idea how to do it. I have played around with Auth but I just dont get it. I have googled to no avail. I have checked firebase website but im not sure what im looking for.
I tried repeating some of the steps for when it saves the account user and password.. but I dont know if im missing a specific set of syntax for this or I just dont know the proper command.
Does anyone know how to solve this or point in the right direction? Can it even be done?
I have been at it the whole day....
A chart is simply a presentation of data. You add the data to firebase and then you can later retrieve that data to present in anyway you wish (as a chart in your case).
Take a look at this example that uses canvasjs to present data as a chart: https://canvasjs.com/react-charts/chart-index-data-label/
If you're following some steps but are running into an issue you have to be specific because without more detailed information it's anyone's guess what the issue is as to why it isn't working.
but I dont know if im missing a specific set of syntax for this or I
just dont know the proper command.
How do you know something is not working? What's the result and what's the expected result?
Your first step would be to get authentication working. You can follow this documentation to help you get setup using the web: https://firebase.google.com/docs/auth/web/password-auth
After that you want to use create a database that has a collection, say 'charts' where each document could have the 'uid' of the users.
Take a look at this step-by-step tutorial.: https://www.youtube.com/watch?v=4d-gIPGzmK4&list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB
It guides you through authentication as well as storing data. Once you get that setup, viewing your data as a chart would be a front-end presentational thing and depend on what you're using to display the data. If you're using reactjs, https://react-charts.js.org looks like a good option.
I've started using contentful, created a few entries and now I want to make a simple dynamic page with subpages.
Basically, a portfolio. What i want to have there - index page with links to inner portfolio pages. I've got a JSON with entries each of them containing title, content, slug, id, etc.
How do i make them have each of their page with url? Template is going to be the same. So for example the user comes to url.com/someurl and he sees the page for some specific item in entries.
My gut is telling me that usually controller does this kind of job. Should i try using some frameworks like angularjs?
You can have a look at this simple example app I've been working on, using just plain JS. It's not entirely finished but showcases the very basic principles of using Contentful to build a frontend only app with the contentful.js SDK: https://github.com/contentful/product-catalogue-js
Give that you added an angularjs tag I'm assuming you could also be interested in this: https://github.com/jvandemo/angular-contentful
Essentially you should just build an app as any other, using whatever framework (or not) you want, but get the data from Contentful instead of an AJAX endpoint or any other data library.
What you might want to think of as well is how you structure your Entries and Content Types in Contentful. A good strategy is to have some kind of Entry that corresponds to a page (for instance, in that example app there are Products and there are individual pages for each Product), and then have related Entries you can link to it (like say, Blog Posts and Images).
So I have been tasked with i18n on a new Angular app we are creating. I already know how to implement it if the translations are stored in json format on the client. However I have been told I cannot implement it like this as the translations will get updated on a regular basis by the client so must will have to be got from the api.
I have also been told that I cannot map directly to the json response, but instead I must create TypeScript objects which sit between the json and the UI.
What is the best way to achieve this? The header has a dropdown for languages. Do I need to call all the languages when the application loads and cache them, or do I just call each language as I need to? Do I translate only what I see on screen or does the entire app need to be translated?
do I just call each language as I need to
Definitely only the ones you need.
Do I translate only what I see on screen or does the entire app need to be translated
The relevant portions get redirected to an in memory i18n angular service that has the results cached.
I was looking at scores at http://www.cbssports.com/nfl/scoreboard earlier and upon inspection of the code, I couldn't quite figure out how they update their scores.
I don't see any ajax calls and the games don't appear to be wrapped into iframes, etc.
Can anyone explain to me how this works?
It seems like they are using Flash code to update the scores. I disabled Flash in my browser and got the following message:
However, if you want to implement something like that without using a Plugin, you can use Websockets in Javascript.
Check out line 1884 of the scoreboard file. The storePlayers function will format that big string into sets of markup that is used in the ticker.
I'm working on an AJAXy project (Dojo and Rails, if the particulars matter). There are several places where the user should be able to sort, group, and filter results. There are also places where a user fills out a short form and the resulting item gets added to a list on the same page.
The non-AJAXy implementation works fine -- the view layer server-side already knows how to render this stuff, so it can just do it again in a different order or with an extra element. This, however, adds lots of burden to the server.
So we switched to sending JSON from the server and doing lots of (re-)rendering client-side. The downside is that now we have duplicate code for rendering every page: once in Rails, which was built for this, and once in Dojo, which was not. The latter is basically just string concatenation.
So question part one: is there a good Javascript MVC framework we could use to make the rendering on the client-side more maintainable?
And question part two: is there a way to generate the client-side views in Javascript and the server-side views in ERB from the same template? I think that's what the Pragmatic Programmers would do.
Alternatively, question part three: am I completely missing another angle? Perhaps send JSON from the server but also include the HTML snippet as an attribute so the Javascript can do the filtering, sorting, etc. and then just insert the given fragment?
Well, every time you generate HTML snippets on the client and on the server you may end up with duplicated code. There is no good way around it generally. But you can do two things:
Generate everything on the server. Use AHAH when you need to generate HTML snippets dynamically. Basically you ask server to generate an HTML fragment, receive it asynchronously, and plug it in place using innerHTML or any other similar mechanism.
Generate everything on the client (AKA the thick client paradigm). In this case even for the initial rendering you pass data instead of pre-rendered HTML, and process the data client-side using JavaScript to make HTML. Depending on the situation you can use the data island technique, or request data asynchronously. Variant: include it as <script> using JSONP so the browser will make a request for you while loading the page.
Both approaches are very simple and have different set of pros and cons. Sometimes it is possible to combine both techniques within one web application for different parts of data.
Of course you can go for exotic solutions, like using some JavaScript-based server-side framework. In this case you can share the code between the server and the client.
I don't have a complete answer for you; I too have struggled with this on a recent project. But, here is a thought:
Ajax call to Rails
Rails composes the entire grid again, with the new row.
Rails serializes HTML, which is returned to the browser.
Javascript replaces the entire grid element with the new HTML.
Note: I'm not a Rails person, so I'm not sure if those bits fit.
Has anyone tried something like the following? There's redundant data now, but all the rendering is done server-side and all the interaction is done client-side.
Server Side:
render_table_initially:
if nojs:
render big_html_table
else:
render empty_table_with_callback_to_load_table
load_table:
render '{ rows: [
{ foo: "a", bar: "b", renderedHTML: "<tr><td>...</td></tr>" },
{ foo: "c", bar: "d", renderedHTML: "<tr><td>...</td></tr>" },
...
]}'
Client side:
dojo.xhrGet({
url: '/load_table',
handleAs: 'json',
load: function(response) {
dojo.global.all_available_data = response;
dojo.each(response.rows, function(row) {
insert_row(row.renderedHTML);
}
}
});
Storing the all_available_data lets you do sorting, filtering, grouping, etc. without hitting the server.
I'm only cautious because I've never heard of it being done. It seems like there's an anti-pattern lurking in there...
"Perhaps send JSON from the server but also include the HTML snippet as an attribute so the Javascript can do the filtering, sorting, etc. and then just insert the given fragment?"
I recommend keeping the presentation layer on the client and simply downloading data as needed.
For a rudimentary templating engine, you can extend Prototype's Template construct:
http://www.prototypejs.org/api/template
As your client scales and you need a rich and flexible MVC, try PureMVC.
http://puremvc.org/content/view/102/181/
As in regular server side programming you should strive to encapsulate your entities with controls, in your case client side controls that has data properties and also render methods + events.
So for example lets say you have on the page an are that shows tree of employees, effectively you should encapsulate it behavior in a client side class that can get JSON object of the employee list / by default connect to the service and a render method to render the output, events and so on.
In ExtJS its is relatively easy to create these kind of controls - look at this article.
Maybe I'm not fully understanding your problem but this is how I would solve your requirements:
Sort, Filter
It can be done all in JavaScript, without hitting the server. It's a problem of manipulating the table rows, move rows for sorting, hide rows for filtering, there is no need for re-rendering. You will need to mark columns with the data type with custom attributes or extra class names in order to be able to parse numbers or dates.
If your reports are paginated I think it's easier and better to refresh the whole table or page.
Group
I can't help here as I don't understand how will you enable grouping. Are you switching columns to show accumulates? How do you show the data that doesn't support accumulates like text or dates?
New item
This time I would use AJAX with a JSON response to confirm that the new item was correctly saved and possibly with calculated data.
In order to add the new item to the results table I would clone a row and alter the values. Again we don't need to render anything in client-side. The last time I needed something like this I was adding an empty hidden row at the end of the results, this way you will always have a row to clone no matter if the results are empty.
Number 5 in my list of five AJAX styles tends to work pretty well.