Develop Reference

How to add animation to your mean stack application [closed]

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.

Abandoning Bootstrap for my own framework [closed]

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 6 years ago.
Improve this question
I've been working on an Admin interface for a desktop-first web application. There will be an iOS application for mobile users and if we need browser support on mobile, a mobile-first UI will likely be designed. I've only been working with CSS/JS/HTML for about 30-days, so please forgive any mistakes I make.
to get rolling, I started using Bootstrap, however, I ran into a number of issues and decided to abandon it. I do not require responsiveness in the traditional sense of a grid system and fine tuning my design using a grid model was truly painful.
I discovered on my journey that using #Media, I could adjust the CSS for various elements based on screen resolution and even go so far as to remove an element using width="0" and introduce a new element by turning it's width on. I'm using flexbox for my layout, which I find to be incredibly effective to work with and provides me with solid control over the presentation of my UI.
I plan to eventually convert my admin into a EmberJS app, which give me even more control over when and how elements are displayed.
Although I'm still learning, I've found resources like w2schools.com to be very helpful in adding elements like a sidebar using plain JS and CSS. This keeps my application simple and easy to follow, rather than having to work with a monolith framework.
My question is, is it acceptable to adjust your design based screen size and add and remove elements using a width="0" as the toggle or is there a better way? Also, is it acceptable to adjust your layout overall using #Media versus a grid?
I'd like to eventually turn my app into a native Windows app using Electron so I'd like to not make any bad choices that will cause me problems later.
Thank you for your help.

is it acceptable to adjust your design based screen size and add and
remove elements using a width="0" as the toggle or is there a better
way
there is a better way:
use css display: none property to hide and show elements but this also removes the space occupied by elements.
If you just need to set visibility off then use visibility: hidden
is it acceptable to adjust your layout overall using #Media versus a grid
yes its fine to use #media queries. But using bootstrap grid system is pretty easy and it can also handle cross browser issues which otherwise you would have to handle manually.

AngularJS interview questions/challenge [closed]

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

Is hiding content by Javascript or jQuery Worth trying [closed]

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
I can hide content by using display:none; in css. But I read on many websites that Google doesn't like display:none;. I really need this because of jQuery animations.
Now I found new method for hiding content through Javascript/jQuery.
$(this).css({display:'none'});
Is this better than display:none;. Is this Google Friendly?
Here is fiddle

Google has guidelines that you can follow to make your site safe to be crawled:
https://support.google.com/webmasters/answer/35769
Be aware that the Google bot does understand and execute basic JavaScript on web pages now to see what results a user would actually get to see:
https://support.google.com/webmasters/answer/81766?hl=en
Here's a snippet about hidden text or links: https://support.google.com/webmasters/answer/66353
Hiding text or links in your content to manipulate Google’s search
rankings can be seen as deceptive and is a violation of Google’s
Webmaster Guidelines. Text (such as excessive keywords) can be
hidden in several ways, including:
Using white text on a white background Locating text behind an image
Using CSS to position text off-screen Setting the font size to 0
Hiding a link by only linking one small character—for example, a hyphen in the middle of a paragraph

The main issue to me is that if you hide it in the css and then use javascript to show it, visitors without javascript enabled will not be able to view the content. Using $(this).css({display:'none'}); to hide the content will ensure that it will display by default for those without javascript enabled.
This issue comes up often in trying to avoid a flash of unstyled content. Good discussion and solutions provide at http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

Using CSS display:none is perfectly fine for google. The JS way won't offer you any benefits, SEO-wise.
Here's one example: http://seotesttool.com/blog/does-the-google-bot-index-css-hidden-divs/
However, the problem arises if you hide content (by either of these methods) that is solely for the purpose of tricking google... keyword stuffing, spammy links, etc. Then you are likely to get penalized and removed from Google's index all together, and you will have to go through a manual process to fix your site and wait for it to be verified and re-added. So as long as you are not planning this sort of scheme, and you're just doing a normal hide/show of user-friendly content, you will be fine.

From what I've heard, content within a display: none; block does not get read by search spiders and screen readers. If you use javascript to hide it (even via .css() or .hide() methods) you'll be hiding it after the spiders have crawled the page.
The downside is that there also may be a flash before the js loads where you can see the hidden content. Try using the .visuallyhidden convention if you want computers to read through your content.

What type of click should I use in my web app? [closed]

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 1 year ago.
Improve this question
Background:
We are developing a web application that includes charts. Currently one can left-click on a chart point to zoom/drill-down into that section of the data. We are adding some other functionality that allows users to add meta data to data points. I know users will be exclusively using Mozilla, though I shy away from anything that limits to a single browser. No js libraries please.
Question:
What type of "click should I use for adding metadata to an element that already has a left-click (hyper-link)?
Some alternatives I've brainstormed:
capture oncontext menu of right-click (this is abhorrent to me)
double-click
ctrl-click
make left-click open a context-ish menu that has the existing left-click as well as new functionality
Are there any conventions for these? What would you find most intuitive?

Rather than having a single click zoom in, why not use a double click instead? Personally, I find that to be more intuitive when viewing something not to mention it being a fairly common standard.

Put some kind of affordance (maybe a small icon) next to the link that responds to a single click. Else, go with a right click.

Try to meet the users expectations. What do they expect to happen when they single-click, double-click, etc... i.e. How do other applications handle that action?

I would change your idea from a type of click to a specific mode in the chart.
The problem with a special type of click is that there is no affordance for the capability that you want to provide. There is no apparent thing in the user interface that says, "The user is able to add meta-data to data points." Users would only be able to learn about this through trial-and-error or training. Or, perhaps, a note on your app that says, "Ctrl-click to add meta-data." But that is not elegant.
A better approach might be to have a mode button. I'm picturing a toolbar. Think about Microsoft Word, where selecting the Highlight tool turns your pointer into a highlighter. In highlight mode, you can click and drag to highlight text. You can then switch to other modes, like the default text mode. Perhaps you should have an "Add Metadata" mode.
In general for UI design, if you're trying to do something that seems non-standard, think about how existing products have solved the problem. How does Microsoft Excel let you add information to a data point in a chart, for example? Maybe it doesn't. But are there other products that do?

My vote is the "make left-click open a context-ish menu that has the existing left-click as well as new functionality". That needs the least amount of documentation to explain to users how to use. And for a web app usually users expect and read zero documentation.