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 5 years ago.
Improve this question
So after trying out Vue.js for a little while, it got me thinking...Why do we have to use components? I don't understand the hype behind them as I can just take a for loop and create a div and get the exact same output as if I were using components.
Vue.js's documentation even says:
Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code.
But again, it seems it can be done with for loops what Components give you.
The same goes for React as well.
If someone can explain it better, I am all ears.
Thanks.
Not using components in Vue.js or React is like using a hammer for everything. You can obviously try to nail a screw with a hammer, but not everyone will understand you why, as you can implement every GUI element using divs instead of CustomXComponent.
Using components is like using a screwdriver to screw something. Not only their names and shapes are coherent with the thing you want to achieve, but they are faster to do so. Not using it may look like an unprofessional behavior, just not adapting to the right tools for the right things.
If you look into a bunch of divs, you have to look down further what they do. If I give you a custom component named AutoCompleteSearch you may abstract what it is doing, even though its implemented using plain divs.
For the same reason that you would want to use a for loop instead of copy and pasting the same thing N times - the end result to the user is the same, but you'd have code that's significantly more difficult to understand, maintain, and update.
Components are extremely useful because they are meant to be used in a much more complex context than a handful of div.
For example, Imagine if you needed to add a calendar to your page along with a big table of data, a large form, dialog boxes and other UI elements. It sure is doable without components but it will be much easier to maintain and more readable if you split your code into components.
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 6 years ago.
Improve this question
I am designing a website using the MEAN stack, although there are numerous tutorials guiding how to go about the development of a web application using the MEAN stack, am not sure what is the best way to add animation to your application. Specifically, should all the animation just sit in the CSS and the html templates reference those classes. What about adding advanced animation features using the HTML5 canvas, what part of the project does it sit in. What is the most generic and cleanest way to add animation to your MEAN application, is ng-Animate in Angular the way to go about it ?
EDIT: What I specifically am looking to implement is an image of a box gift wrapped in a present with a ribbon hanging on the left side of it. Now I want a little boy/girl to drag the ribbon from left to right and unwrap the present. What is the best way to do this , that fits well with the MEAN stack?
This is a very broad question. It depends entirely on what kind of animations you hope to achieve.
Nonetheless, here are a few of my favourite libraries based on experience:
AOS (Animate on Scroll) -
It is a pure CSS3 driven animation library that animates HTML elements in lots of useful ways.
Demo: http://michalsnik.github.io/aos/
Code: https://github.com/michalsnik/aos
Implementation:
You can use a package manager (npm or bower) to install for use in your project. Or download the source code directly.
Spark Scroll -
A Javascript library that also handles scroll-based animations, as well as animations based on view-port visibility. Very powerful, and can be used to do things such as: draw borders on HTML elements when scrolled into view, trigger styling changes based on viewport visibility (ie. opacity), and many other things. Also, very customizable.
Demo: http://gilbox.github.io/spark-scroll/demo/
Code: https://github.com/gilbox/spark-scroll
Implementation:
Unfortunately, there is no native Javascript implementation for this library. Using Spark Scroll requires utilizing either ReactJS (Facebook) or Angular (Google).
Last but not least,
WOW.js -
Another Javascript library that handles a lot of different animations.
Demo: http://mynameismatthieu.com/WOW/
Code: https://github.com/matthieua/WOW
Implementation: http://mynameismatthieu.com/WOW/docs.html
Honestly, I suggest you edit your post and identify what exactly you're trying to accomplish. I will update this answer after you conduct some research with the resources I've provided and determine what animations you wish to implement.
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 7 years ago.
Improve this question
I am new to JS and am coding a game that will be totally client-side. I have a fundamental question about the HTML structure.
Say that the game is going to be a RPG and I want to show the user their character's statistics, like Intelligence 18, Strength 15, Charisma 20 etc.
Now since these values are not static and will change every new turn (the game is turn based) these values need to be filled in by JavaScript. Let's say we want to display them in a list.
As far as I can see there are two ways to do this, one is to keep a static HTML and use JavaScript only to fill in the values like this:
<ul>
<li>Intelligence:
<div id="IntValue"></div>
</li>
<li>Strength:
<div id="StrValue"></div>
</li>
</ul>
And then in JavaScript edit those divs like getElementById("IntValue").innerHTML = "18";
A second method might be to put only <ul id="CharStats"></ul> in the actual HTML file and then generate that entire list with all the <li> elements and such with JavaScript. For example I could create a tableHTML string and then dynamically add all the <ul>'s to it one by one, and then get CharStats and set its innerHTML to that tableHTML string.
Which is better? I know it would depend on the specific case, but can you at least guide me in the direction of some good resources about coding such things with JavaScript?
Both methods are fine, as a matter of fact there are entire frameworks built on rendering html client side to reduce server load - these frameworks need to be supplied with JSON from the server instead of an entire HTML response afterwhich the JS builds the HTML code that basically makes the page.
However in your case you might want to do things differently, look at it this way:
Method A: Update specific element
Method B: Refresh entire list every time
Method A, If you only change 1 stat per turn - this is the way to go since you'll be updating less of the DOM at a time but you'll have more ID's to keep track of.
Method B, If you're changing multiple stats per turn then you'll probably want to do this since you can just build the <li>'s and put them inside a ul every turn.
It depends on your situation, Method B does modify the DOM more than Method A but both are good to use.
NOTE
Method B removes more elements than Method A, note that if you have other event handlers bound to the elements being refreshed by Method B you're going to have to reselect these elements since the element you used before will be gone.
Performance wise I would not worry about wether Method A or Method B is best. The one least error prone is probably Method A since you're updating specific elements on the page (less DOM manipulation means less possible errors).
Hope this helps pushing you into the right direction, I linked the framework for reference since it uses a quite cool method of displaying data from the server side ;)
Good luck,
Sidney Liebrand
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 8 years ago.
Improve this question
Im trying to get a sense for proper web development techniques , and im wondering if there are any habits i should be developing outside of css usage in terms of structure and layout.
What I've gotten so far is a sense that strategic and logical use of divs can help to give needed control when working with javascript and css.
But are there any other basic things i should consider that may not be aware of?
For example, I know people used to control layout with tables, but is that still a thing? Or is it now bad practice?
Looking forward to your suggestions.
Regarding your table question- People generally choose divs over tables, BUT some things cannot be done well without tables. They still have their place. Divs and Tables inset within each other are often used for datagrid styled layouts for example. Often replacing tables with divs creates a nasty (oversized) amount of css code. If you can use divs cleanly, that is perfect. If it overbloats your code, then use the simpler cleaner old faithful table code - or combine them where it makes for better results.
More info on that here: Tables instead of DIVs (Joel Coehoorn's detailed answer: "The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.")
Regarding the topic of non-CSS since your question also refers to layout design formatting:
There are some things you cannot do well also without pure CSS, that in and of itself allows modern formats to work on multiple devices. This will reach more customers.
For newer layout types for sections of pages needing icons or photos, look into the use of inline-block styled lists. CSS does wonders with them. It is a nice third alternative.
For cross-device development, you should check out responsive and fluid formatting options. A good place to start is to look at http://html5boilerplate.com/ and also http://www.initializr.com/ (boilerplate and bootstrap).
If you haven't worked with them before, look into media queries for browser sizing and device orientation displays (landscape or portrait) - part of the fundamentals in responsive web development. You can then use your regular html within the constraints you set with these.
Try to think of your pages/documents in terms of structure rather than appearance. For example, a book is made up of a title page, table of contents and chapters. Similarly, the contents of a web page can usually be broken down into logical blocks, which are then styled as required. Don't forget that web pages may be read by screen readers - your want to structure your page so the spoken output makes sense.
There has been a discussion of tables vs CSS at Why not use tables for layout in HTML?. You may also want to check out CSS Zen Garden, mentioned in that thread. Beyond this, I strongly recommend validating any HTML and CSS you write. Check out http://validator.w3.org/ for that purpose.
Divs are span are a better options for laying out a page. Tables should be used if tabular data is to be displayed.
Other than that you should mostly consider re-factoring redundant code regularly and resolve paths to directories in config files. This will help you to manage your project better. Redundant code can become a huge problem, since making changes requires changing code at several places. Make sure that you re-factor code that is being used more than once or twice into functions and call them instead.
Try diving into CSS frameworks such as bootstrap or foundation since a big community contributes there and are usually built with best practices in mind. You will be surprised to see the problems you run into have already been encountered by many others and they have found an efficient way around it too. There are frameworks and libraries for JS too. Feel free to explore.
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 8 years ago.
Improve this question
I got assigned to interview an AngularJS developer with some know-how in responsive design.
Since I like my developers to program during interview, I was thinking on creating a challenge where we can work on together for <1h and then to post the results so I can see them also using my phone/tablet.
Any good AngularJS interview questions/challenges out there?
Is there a service that allows me to do it easily? push the code and view it on my phone browser. - plnkr has an embedded mode but dont know how good it is..
Good challange will be to create one directive that will do some small responsive UI element. Like a tooltip that will look differently on desktop and browser and will show up differently (on touch and on hover). The person will need to create html template, small resposive css and javascript to hook it up.
I recently needed to create directive like this that will follow the mouse on hover and be static on mobile (but it didn't have responive css - your challange can include that too - have different looking style on a phone).
You can prepare base html that this should work on
<div ng-repeat="item in items">
<span tooltop="item.description" tooltop-options="{color: item.color}">
{{item.text}}
</span>
</div>
It shouldn't take long to create one UI element. If it will be created too fast you can add next challange to create second small directive that will need to exchange data with previous directive (you should not say that he need to create service). it can be directive that render error messages like:
<errors/>
error messages can be responsive using css, so they look nice on mobile and on desktop.
and one directive that have
<something ng-model="someobject"/>
and that something directive need to send error message to error directive for instance if object type is not array.
The person will need to create directive that use ngModel and service that will contain errors and second directive that will render message from error service.
plnkr is very good and flexible, I would go for it, as for AngularJS questions you can get some ideas from articles like this one: http://nathanleclaire.com/blog/2014/04/19/5-angularjs-antipatterns-and-pitfalls/ I believe that a skilltest about two-way data binding and scope inheritance would be valueable, maybe resource/animation functionalities - but that depends on the work profile i.e. I don't use animation at all in company projects but in private project I do it heavily with famo.us use
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 9 years ago.
Improve this question
Assuming that one is developing a web application which is sufficiently non-intensive that overhead is not a concern. Is it reasonable to implement CSS solely in Javascript/jQuery and completely abandon external css files?
$('<div/>').attr({'id':'special_box'}).addClass('little_box').appendTo('body')
$('<div/>').addClass('little_box').appendTo('body')
$('<div/>').addClass('little_box').appendTo('body')
...
$('.little_box').css({'color':'red'})
$('#special_box').css({'color':'blue'})
Is there anybody advocating this complete conflation? Is there anything that completely prevents it or makes it evidently unreasonable?
EDIT
The unreasonableness, as helpfully explained below, is that the jQuery css function is creating styles that are being applied to the individual element and not creating/augmenting master css rules as I'd assumed.
Although there do appear to be ways to achieve this conflation. I am not qualified to analyse them. Thanks all.
It is not reasonable, not only because it is slow (as you'd expect), any .css calls involving classes, e.g. $('.little_box').css(...), will apply css to only elements of that class that exist at the time, not .little_boxes created in the future.
why do you want to complicate yourself while development, CSS is far easy and better to use than doing css through javascript or jQuery.
Apart from being very time consuming to physically code, you CAN do this. However, it's alot more intensive than CSS and prevents alot of the advantages of CSS.
It's like building an oil rig and oil refinery to fill your car up. You could do it, but why not just go to the petrol station?
I would not advocate this complete conflation - certainly for the reasons that others have already stated, but also for these two reasons:
1) If your application grows and has multiple .js files then it will create an additional headache if you try to implement modular loading of the files using something like require.js
2) Again, if your application ever grew very large or you decided you wanted to, it would make it more work to start using Sass
As I'm sure is becoming apparent, the cons massively outweigh the (dubious) pros of this idea.
It's entirely possible to build a site that way, but it will be more work to do it, and also more work to maintain it. So, there is nothing that completely prevents it, but depending on the amount of styles it may be so much extra work that it would be unreasonable.
There is also a performance factor. CSS stands for cascading style sheets, and with such an approach you would lose both "cascading" and "sheets", left with only the style. In practice that means that you apply each style to each element instead of specifying rules that apply to multiple elements. The jQuery selectors can help you to apply the same style to multiple elements, but it will still loop through them and apply the style to each single element.
As this happens in the browser, you may get a noticable delay when the page loads. Also, the styles would be applied after all the elements are created instead of already be there when the elements come into existance, so the visitor may see the page being displayed completely without styling for a shoft while, then freeze completely while the styles are applied, before it displays correctly.