Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 5 years ago.
Improve this question
I'm relatively new to web development and have a basic understanding of JavaScript (loops, functions, objects) and recently I started learning Polymer 2.0 and I have been struggling with it for a while now.
So I definitely need to brush up my skills. Please provide some resources that I should refer before trying out Polymer again.
What I'm struggling with:
documentation, which seems too complex.
Passing object data from one custom element to another and using functions like fire and dispatch.
well, i would suggest you to try 1.8 polymer first. I have been developing in javascript for 2 years and 1 year in polymer. Few weeks ago i tried polymer 2.0 and i have to say that it is completely like in hell (at least for me)
There is no complete documentation for all elements and polymer itself. Everything i needed i had to find on stackoverflow, some properties has changed and noone ever noticed about that. So Polymer 2.0 is for beginner really hard to understand. Even more when you don't know javascript itself.
Starting with Polymer 1.8 is propably better solution, since you don't need to use ES6 (https://www.youtube.com/watch?v=UBmQpD2RrPU). (I know, there are hybrid elements, but main purpose is to use class definiton). ES6 is really amazing and if you really want to develop in polymer 2.0, you should learn it first. But it makes everything much more harder for someone, who never heard about OOP (what is OOP and how to use it in JS?).
About your questions:
Documentation seems to complex:
This is propably not right. You just need to make some things clear. Polymer itself just connecting elements. Polymer's functions are used to pass data across application, work with DOM, and with variables and so on.
As you can see in documentation there aren't much methods (in compare to size of Polymer).
Just to tell you something about elements, Polymer team created elements with prefixes (iron, paper, neon etc. ) Iron elements are mostly used for some logic, they do something that user can't see or they aren't styled in material-design.
Paper elements are displaying something. with material-design based graphics.
and so on. You can everything about elements find here: https://elements.polymer-project.org/
your second question:
Passing object data from one custom element to another
This is already something you need to understand on yourself. Just follow easy step-by-step tutorial from Polymer site. I could write a book here already about this. Once, I had to teach my co-worker who wasn't so good in javascript (just student) and it was pain. We spend more than 3 hours of sitting in front of screen and even after that he wasn't able to do easy tasks alone.
and your last question
using functions like fire and dispatch
As i said. I have been developing apps in Polymer for 1 year and these functions are rarely used in my code. function Fire is great, if you have some nested elements or somewhere in DOM tree and from 1 element you need to call another one and tell him something interessting. It's broadcasting to all elements and these elements can catch this broadcast and accept it.
This is a little bit long and maybe a forget something, so ask if you need something more
Related
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 7 years ago.
Improve this question
My wife's birthday is coming up and I would like to create a website similar to
Ba Ba Dum: https://babadum.com/
I have learned HTML5 in school but never learned about its ability to create animated websites.
How do I go about making a website like that? Do I have to use Flash or is it fully rendered with HTML5? Looking at the source code revealed something about google api and ajax and jquery, are they essential to making an animated website like this?
Thanks!
Although your question is way, way too broad, I'll try to help.
The site you linked -as far as I can tell- is made HTML, CSS and JavaScript. There are less and less sites that use Flash, and you shouldn't use that either - it's starting to die out, at last.
Be prepared to research a lot - you'll have to learn about CSS3 (style, position and animations), JavaScript ("JS", it's very useful for sites filled with interactive elements - sounds, videos, etc) and jQuery (special JS library, it contains several dozens of pre-written functions that can make web development easier and faster). If I were you, I'd visit Codecademy, it's a website that teaches these languages, and for free. Completing those courses shouldn't take more than 20-30 hours, and it would give you a solid base to start from.
Of course, the required skill level depends on the type of site you want to build. A simple, animated website can be built with only HTML and CSS3. For more complex sites you most likely have to use JS and jQuery.
Here is what should you do:
Start out with a fix idea: you want to know what you want to create, especially because (probably) this will be your first serious project. Doodle on paper, write down your ideas about what should happen if you press a button, for example.
Divide the site into smaller pieces: you won't finish it one day, so you should focus on building the site step by step. Create a button, use CSS to make it fancy then give it some animation. If you are satisfied, you can move on to the next part.
Research: most likely you won't be the first person to do the things you want to do the way you want to do. Use google and you'll find hundreds of different tutorials, starting from simple things (building a layout) to more complex one (pure CSS animations, canvas, etc). If you stuck, Stackoverflow will help, but you'll have to be more specific with your questions. This current question is bad, and I'm only writing this response because I too know about needing help and realizing no one will help me just because my question is too broad. And I don't have anything better to do at 23:40 :) Try to find out if someone already asked your question - it's possible, and that way you may find the answer(s) instantly.
Study source codes: if you are using Chrome, you click on any element on a site to view it's code - you just have to select "Inspect element" from the context menu (there are other ways to do it with other browsers). It will show you the HTML, the CSS properties and even the relevant JS code. You can modify these values (especially useful with CSS) if you want to experiment a little - these changes are only visible for you and deleted when you refresh the page. This method is useful if you found the perfect button animation you want to include on your page but don't know how to do it.
Backup your work! Create a backup copy of your site every day, so if you mess something up badly (happens to everyone, especially if you're in a hurry like often I am) you don't have to start from scratch. It happened to me before, and if you are using other people's code (from tutorials, I'm not talking about stealing) it might happen to you too.
Also, good luck!
Here are a few places I'd recommend going to, all of these have helped me and are a good place to start.
Codecademy - http://www.codecademy.com/learn
For basic HTML, CSS, JavaScript and jQuery lessons. Best site on the web, I say. Also, recently released AngularJS lessons, which are quite good.
Code school - https://www.codeschool.com/
Provides good AngularJS lessons, which you should do once you've finished the Codecademy ones.
Egghead - https://egghead.io/
Good for AngularJS lessons and HTML5 canvas lessons. The HTML5 canvas lessons are brilliant, the presenter is a genius.
What all these things are.
HTML5 canvas - A method of drawing graphics to the screen. Great for video games and animations. I've actually made the loading effect of that site you listed with canvas.
jQuery - A JavaScript library, which is a bunch of predefined functions for ease in coding. It is good for special effects and event listeners.
AngularJS - An awesome library which makes displaying data so much easier. Great for fast single page apps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I want to display a genealogy tree without flash. In HTML/javascript/css.
I have a big problem displaying my tree because of the:
Difficulty to display the marital link between 2 parents
the children nodes
Do you know any api which can build a family tree as www.familyecho.com does? I am gonna be crazy????
Here an example
Father --- Mother
|
|--------|------------|
Child1 Child2 Child3
Thanks
you may want to take a look at http://www.myheritage.nl as example, familiecho is pale in comparison to that. Is free for op to 500 familimembers but unfortunatly is made in Flash, so no chance of borrowing some code or libraries there.
If you just want to use HTML there is http://www.starkeffect.com/ged2html/ but is a bit oldfashioned.
There are several drawing libraries for javascript bun none that are aimed at genealogy as far as i know, anyone who comes up with one i would be gratefull.
Raphael at http://raphaeljs.com/ being the widest known vector graphics library, see http://javascript.open-libraries.com/utilities/drawing/10-best-javascript-drawing-and-canvas-libraries/ for a comparison and see this Javascript drawing library? question. Basically you will have to make a choice between vector (eg SVG) approach and rendered graphics (eg Canvas), each of them having their own advantages, libraries and followers.
See http://www.outten.org/?id=46
Based largely on the familyecho look which I also liked.
Data is dynamic from MySQL & the dragable page gfx are built locally in javascript. A bit hashed together with tables, but works in a fashion except on mobile devices.
Alex
If you are looking for an API as Familyecho. There is already an API supported by Familyecho.com You can use it, they also provide developer sample code for quick integration. Navigate to their website for more info.
Here is the link: https://www.familyecho.com/?page=api
Wes, the link was to a page that has the code embedded, not just example of output.
The data is pulled from MySQL translated into a js object (here:https://www.outten.org/data.php?id=46).
Else the javascript is self explanatory at the bottom of the document source, otherwise standard JS jQuery etc. used.
There's no licensing for this code only what has been used from others & may be used as you wish. There are many things that could be improved about it.
BTW the link has changed & been updated to:
https://www.outten.org/newTree.html?id=46
I had been looking for a JS module to do this for decades, but none do even Node.js
With regards
Xander (Alex) Lost old stack exchange login :(
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Recently I had to develop several web applications. I did extensive research regarding JavaScript UI Libraries but I haven't been able to find one I was really satisfied with. What I mean with UI libraries is a library which provides user-controls such as buttons, combo boxes, grids, charts, layout, ...
What I found so far and why I didn't like it a 100%
jQuery UI has too few controls. (I know there are a lot of plugins and you can nearly find everything but it is not the same as a complete library made and tested by one team or group)
Dijit (Dojo). I really like this one but when I try to use it in my websites I'm always having troubles. They don't seem to be as easy to use as other libs.
YUI version 2 had a lot of controls, but the "new" version 3 still misses many controls. (or I am just too dumb to find them) I don't want to work with both versions at the same time or use an old version which will be replaced soon.
DHTMLX has many controls and they work really well, but the controls themselves lack many features. (for example the HTMLEditor does not even support to change the text color out of the box or I could not find an easy way to expand/collapse tree nodes with some sort of animation)
If anybody knows of a good library which I have not tried yet or knows how I could use one of the above libraries "better" I would be really happy.
I am wondering why at this point (where web-apps are getting so important) I still can't find a complete UI framework which would provide me with controls which you can find in other environments since years (or even decades) - for example Java, .net or Delphi to name just a few.
edit:
I know there won't be a library with every control I ever need, but what I expect from such a library is at least: consistent skins, api, documentation, validation and the most important controls you'd need in business apps/websites (datepicker, button, editor with support for numerical data, grid/tree, layout controls, HTML editor) AND the possibility to create your own controls. good to have: charts or reporting
Ext JS provides the best GUI widgets by far. I've used it for a large intranet project, and have been completely satisfied. It's available under GPLv3 and a commercial license.
Be extremely careful when evaluating open-source frameworks. They tend to religiously promote the quality of their projects, but I've found that poor documentation and buggy code are pervasive. Dojo claims heavy industry involvement, but their documentation is poor, and it's not hard to find bugs on their website (the dijit example pages have been broken for months at a time...).
Your comment about JQueryUI is very telling.
As you say, JQueryUI does provide relatively few controls, but has a lot of plugins available. But you're looking for a single library with everything you want built-in.
This is a tough ask, because we don't actually know what widgets you really want, which ones you like the sound of but probably wouldn't use, or which ones you'd use but only if they worked exactly the way you want.
It's virtually impossible to predict all the widgets that someone may want, or how they want them to work. And even if a given library does get it exactly right, when your needs change slightly in the wrong direction, suddenly the library you chose could turn out to be a poor choice rather than the right one.
This is why flexibility and maintainability are far more important than getting an exact feature match. Once you go beyond the basic set of widgets, most others are built on top of the simple ones anyway, but everyone has their own ideas about how they should be implemented, and new UI concepts are being thought up every day. This is why the plug-in model works so well, and why I feel you're making a mistake in discounting JQueryUI because most of the widgets are available as plug-in. In fact, I would say that this model is likely to be the best solution for you.
There are a number of other libraries available which you haven't mentioned. Mootools and Prototype are probably the best well known, but there are others too. Rather than list them all, I'll point you to this page on Wikipedia, which lists them all in a comparative table: http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
I hope you find that helpful. But I suspect you won't find any library in that list that comes with every widget you'd ever want, all in one bundle. They all rely on plug-ins, because the library developers are generally focusing on making a framework for widgets, rather the widgets themselves.
Check out PrimeUI, provides various widgets and built with jQuery UI APIs. Licensed under Apache V2. http://www.primefaces.org/primeui/
Recently Telerik Kendo UI which is built on top of jQuery (no impedence mismatch with other frameworks) has Open sourced (Apache 2.0 License) their Library of Widgets.
I strongly recommend this..
Telerik Kendo UI is not Open Source
Download the Kendo UI - Open Source edition
If you don't mind the licencing you should have a look at http://www.sencha.com/ the ExtJS library.
A demo library available at http://www.sencha.com/products/extjs/examples/
SAPUI5 web controls listing with example source code:
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to get in the habit of designing the interfaces to my websites at the very beginning before I do any actual coding. I've read "Getting Real" by 37 signals and they recommend doing the interface first, before any actual code is produced.
What exactly is meant by that? Does that mean use pure HTML and CSS to design the site and add php, js logic to page afterwards, or is it okay to sprinkle in the php, js from the beginning?
What if your using a framework, should I set up empty controllers that simply call the views, or should the early stages be solely html, css?
Also, what do you guys think about design first vs later?
EDIT I'm talking about AFTER I have sketched everything with pen and paper.. I'm taslking solely about the html mockups. And I'm not too sure about using extra tools that I would need to learn to do this
I think that the majority of the benefit of designing the interface first has been achieved after you are done your paper sketches. Basically, you are just ensuring that you have a design in your head and that your coding process is somewhat end-user driven. You are also trying not to waste time on needless documentation.
Getting the HTML in place (or the skeletons of the Views in an MVC app) makes some sense and this is the main thrust of what 37signals says. I would certainly not do anything beyond this that is just going to be thrown away.
I think if you have a proper design, it is immaterial if you next move on to writing the back-end code after the HTML or if you do the CSS and JavaScript. The CSS and the code should not even need to be aware of each other.
Do whatever gets you excited and motivated. Do whatever gets you thinking more deeply about how the app will actually work so you can catch any flaws in your original thinking. I like to code before CSS but that is just me. You might find it important to get the CSS further along before the app takes shape in your head.
Joel Spolsky likes Balsamiq as a mocking tool. I think that 37signals uses Draft (an iPhone app). I use a Sharpie. The key is not getting too detailed though.
Opinions vary, but I believe that JavaScript should come last. I believe most sites should be designed so that they work 100% without JavaScript and then have JavaScript added for polish.
Learn more about Unobtrusive JavaScript
So (for me):
Quick and dirty sketches of views
Get some HTML in place
Maybe some basic CSS for layout (or more if I need to impress somebody early)
Write the core logic
Add support for web services and AJAx calls
Pretty it all up with snazzy CSS
Write some JavaScript to add the sizzle
Let me ask you this. Do you paint a car before or after you have made the working parts? Maybe you have chosen which paint but ultimately it cannot go on until the car is finished. Maybe you don't agree with this analogy but I think coding will bring out issues that cannot be understood before a site is designed. Code first, design second.
Get a pad of paper. Each page represents one page of your site.
Sketch the interface. What controls go on each page? What controls are the same on each page? What forms are there and on which pages? What happens when user clicks on item x? Item y?
This will help you solidify your plan of both the content and behaviour of your site.
If you just start blindly coding you will end up with burnt spaghetti.
The user interface is what the users of the website will see. Before coding you probably start with some very basic sketches of the site that are not code, to identify page navigation, general placement of content and interaction with the site.
But the earlier you can show and discuss a working UI, the easier it is for the users/client to get an idea of the final product. So quickly move to the HTML, CSS, JavaScript and things like images, to identify:
The data presented on the page (HTML)
The representation of the data (CSS)
The interaction with the data (JavaScript)
Doing so helps to gradually develop an actual working UI that you can discuss with the client. This keeps them involved from early in the project. It forces them to think about the site, and make decisions about content, look and interaction.
Getting such feedback early in the project reduces the risk of building a product that needs to be changed later on. And making changes early in the project is easier/cheaper, then later in the project.
While the UI is being developed you can already start looking into data structures, software components and integrations with other systems to drive the site. But that's not what users/clients are interested in, they want to see and use the product.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I'm starting to migrate some html generation tasks from a server-side framework to the client. I'm using jQuery on the client. My goal is to get JSON data via a REST api and use this data to populate HTML into the page.
Right now, when a user on my site clicks a link to My Projects, the server generates HTML like this:
<dl>
<dt>Clean Toilet</dt>
<dd>Get off your butt and clean this filth!</dd>
<dt>Clean Car</dt>
<dd>I think there's something growing in there...</dd>
<dt>Replace Puked on Baby Sheets</dt>
</dl>
I'm changing this so that clicking My Projects will now do a GET request that returns something like this:
[
{
"name":"Clean Car",
"description":"I think there's something growing in there..."
},
{
"name":"Clean Toilets",
"description":"Get off your butt and clean this filth!"
},
{
"name":"Replace Puked on Baby Sheets"
}
]
I can certainly write custom jQuery code to take that JSON and generate the HTML from it. This is not my question, and I don't need advice on how to do that.
What I'd like to do is completely separate the presentation and layout from the logic (jquery code). I don't want to be creating DL, DT, and DD elements via jQuery code. I'd rather use some sort of HTML templates that I can fill the data in to. These templates could simply be HTML snippets that are hidden in the page that the application was loaded from. Or they could be dynamically loaded from the server (to support user specific layouts, i18n, etc.). They could be displayed a single time, as well as allow looping and repeating. Perhaps it should support sub-templates, if/then/else, and so forth.
I have LOTS of lists and content on my site that are presented in many different ways. I'm looking to create a simple and consistent way to generate and display content without creating custom jQuery code for every different feature on my site. To me, this means I need to find or build a small framework on top of jQuery (probably as a plugin) that meets these requirements.
The only sort of framework that I've found that is anything like this is jTemplates. I don't know how good it is, as I haven't used it yet. At first glance, I'm not thrilled by it's template syntax.
Anyone know of other frameworks or plugins that I should look into? Any blog posts or other resources out there that discuss doing this sort of thing? I just want to make sure that I've surveyed everything out there before building it myself.
Thanks!
Since posting this question, I have found many other templating options. I've listed many of them below. However, there was recently a jQuery templates proposal that may be the most promising solution yet. There is also a discussion about it on the jquery site. Here is the project location:
https://github.com/nje/jquery/wiki/jquery-templates-proposal
Other solutions I've come across include (in no particular order):
http://www.west-wind.com/weblog/posts/509108.aspx
http://ejohn.org/blog/javascript-micro-templating/
http://beebole.com/pure/
http://archive.plugins.jquery.com/project/jTemplates
http://archive.plugins.jquery.com/project/advancedmerge
http://archive.plugins.jquery.com/project/tempest
http://archive.plugins.jquery.com/project/jBind
http://archive.plugins.jquery.com/project/cliche
http://archive.plugins.jquery.com/project/appendDom
http://archive.plugins.jquery.com/project/openSocial-jquery-templates
http://archive.plugins.jquery.com/project/Orange-J
http://archive.plugins.jquery.com/project/fromTemplate-microtemplate
http://archive.plugins.jquery.com/project/resiglet
http://archive.plugins.jquery.com/project/databind
http://archive.plugins.jquery.com/project/jsont
http://archive.plugins.jquery.com/project/domplate
http://archive.plugins.jquery.com/project/noTemplate
http://archive.plugins.jquery.com/project/jQueryHtmlTemplates
http://github.com/trix/nano
http://aefxx.com/jquery-plugins/jqote/
http://ajaxian.com/archives/chainjs-jquery-data-binding-service
http://ajaxpatterns.org/Browser-Side_Templating
http://beebole.com/pure/
http://code.google.com/p/google-jstemplate/
http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
http://embeddedjs.com/
Javascript template system - PURE, EJS, jquery plugin?
jQuery templating engines
http://goessner.net/articles/jsont/
Sounds like you want sammy.js
http://code.quirkey.com/sammy/
The tutorials there demo use of the template engine
I've used jTemplates quite a few times and from my experience it serves its intended purpose.
If we're limiting the discussion to client side then this is my final comment on the matter as it does the job and despite some funky syntax does it well, however on the server side of things I would definitely prefer the scenario where you POST some JSON which is deserialized to an in-memory object and then validated and passed to a server-side template (such as an ASCX in ASP.NET) where you have the full power of that language.
In my opinion, if the client supports JavaScript well enough for you to be considering jTemplates then I would recommend setting yourself up a JavaScript utility method which allows you to send JSON and receive HTML, thereby cutting out the potentially troublesome middle man. Most languages have JSON-parsing ability and jQuery can auto-parse a server response into JSON by specifying the return type as "json".
Even if you don't receive the JSON from the JavaScript, you can still take the JSON that you would have sent back to the browser and just send it through your server-side template instead. In ASP.NET (with MVC for example) you can have strongly-typed template files that do not need to be compiled, making changes a lot easier to implement. Therefore you would still be sending back markup, but it would have been run through a proper template with the full strength of a programming language behind it.