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
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 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.
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 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.
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 am working with angularJS to create a simple side menu. I have the following two options for its directive design but cannot decide which one is better:
Option 1
The HTML markup:
<sidebar title="Sidebar Heading">
<sidebar-element name="Heading">Description</sidebar-element>
...
</sidebar>
Option 2
The HTML markup:
<sidebar>Sidebar Heading</sidebar>
And, the data is coming directly from the controller:
$scope.sidebarElements=[{name:'Head 1', description:'Description 1', isActive:true}];
Consider that the data is coming to me from the server in JSON.
If I go with option 2, I can pass the data directly to the controller.
If I go with option 1, I would have to do a <sidebar-element ng-repeat='element in elements' ...> in it, and then pass on the data to it. Option 1 seems 'better designed' somehow but I don't know if I should build another layer of abstraction this way when it is not especially required.
Which one of the two would be better and why?
I have just started to work with AngularJS and am trying to find the right way to 'think in AngularJS'
It depends on how extensible you need to make this design. If you want to make this design to work as option1 in future, then only you should go for it, because it is also going to consume more time to put extra piece of code.
If you want to go with highly extensible approach you should create directive and also the directive which will create collection using controller data. This (Option1) will allow user to use the combination of both the directives to get the menu with static or dynamic data.
If you decide to go with option1, this link will be useful [LINK] : http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/
[It has live example] : http://jsbin.com/acibiv/3/edit
If your data is always coming from json (controller data) and there will never be the need to add from html (static ) then you just go with option2.
I think as you are starting, you should go for option2 (Less reusable but easier as compared).
About directive naming
I think sidebar may contain other elements (other than menu). So naming should tell that it is menu.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So I have created a layout for polymer that could be used as a general site layout. Which in the processes I created 2 custom elements, which are available via git hub.
The problem I am having is the CSS cannot be set for sub components.
I am thinking that is a browser issue but I am trying to verify. It works perfectly in Chrome (of course).
But in Firefox and IE the main header does not change.
Then there are other various differences. For example in IE if you open the search none of the drop down options appear until you click on it. In FireFox when you open the search the layout is off.
To view it you can goto
This is the default/original layout just something for a starting point.
http://trutekinnovations.com/
This is a dark theme I am working on and how you can see the issue
http://trutekinnovations.com/jbtheme.html
This is actually for a couple of personal projects I am hoping to launch within 6 months to a year. I know polymer is not production ready but I am betting the farm per say that it will be by that time.
Does anyone have any suggestions. I tried turning the CSS into variables in the component but that did not work.
I was about to try pulling out the CSS and then seeing if I Could make it external and have the CSS url be a variable that defaulted to a local version.
That is what I will probably try tomorrow. The problem is I understand this is new and instead of doing what I have done in the past on new emerging technology (which is beat my head against the wall till I get it to work) I want to actually try using the community.
Plus I hope people check out my components and help me improve them. Thanks for any tips/suggestions.
Well, I was able to solve my own issue using the method I suggested about dynamically loading CSS.
I found the following site:
http://japhr.blogspot.com/2014/06/dynamically-adding-external-styles-to.html
Which I was then able to use that code to modify it so I can load a base CSS class and then load a custom theme, or multiple custom CSS. Technically I can pull out colors and have it dynamically load the base css, and then load a default theme. Which is probably what I will add next.
To see the code you can view the github
https://github.com/tikicoder/trutek-header-panel-drawer
To view the demos:
http://trutekinnovations.com/
http://trutekinnovations.com/jbtheme.html
It would have been nice if I could have done it using something like
I did try that but it did not pull the variable. I could do that in the style tag and pass custom CSS, but it only worked in Chrome.