I am a junior programmer working with Ruby on Rails. I am curious what is the best/elegant approach when you have to show content that has different states.
For example: I have a form on a page that can be shown, hidden (replaced with some text), or disabled (three states) - depending on users rights and other variables.
Is it best to put the form in a partial? Make different partial for different form states? Use helpers to wrap the logic?
Also, what's the best approach when I only have to add(or not to add) a class tag to a HTML element (decision made depending on some variables).
the show/hidden/view must be based on some business rule, so you should not implement that purely in the front-end. For instance, if you actually fetch the data but hide it using a style, the data is not really hidden. So it should be implemented in the middle tier "Controller" of your application.
Related
I am creating a Windows Forms application in order to compare two HTML documents. The first one is retrieved from an external source and contains some structure mistakes. So an algorithm is applied to transform the HTML text into an optimized document and that corresponds to the second document to compare. After that, I want to visually compare the optimized document to the first one and display differences if they are ones.
I created a form with two webview2 controls, where the first one displays the first HTML document. A button is used to transform HTML text and then I would like to know what is the best way to perform a visual comparison. The ideal behavior would be for the second webview2 to display the transformed HTML document and to display differences with a special color for example.
So my first approach is to use this function:
await webview2.CoreWebView2.ExecuteScriptAsync("window.print();");
And perfom a visual comparison of the two screenshots, but I saw that the control of the print popup window is not possible for the moment with the webview2 component.
So do you think there is a better way to accomplish that? Are there any more suitable components or tools to perform this comparison?
Thanks in advance for your help!
In the algorithm, could you add the changed element ids to a list, take that list, and then change the CSS via javascript to highlight the elements in the list.
I'm working on an implementation of it now to see if its viable.
I'm currently working on an Angular app, specifically a quite complex table, in terms of styling and features.
My component file currently has 2k lines of code, and it comprehends functions for styling text, styling the table, functions for check if data treated are correct, data formatting and so on...
Many of theese funtions are called directly from the HTML fiel thorugh interpolation.
Is there any way to break up this quite large file into smaller ones?
You can break up your component into smaller ones and nest them.
Typical example:
<app-list>
<app-list-item></app-list-item>
</app-list>
The parent component can then pass its properties down to the child components:
<app-list>
<app-list-item [name]="valueFromParent"></app-list-item>
</app-list>
It is further possible to emit values back up from the child to the parent:
<app-list>
<app-list-item (onChildEvent)="updateParent($event)"></app-list-item>
</app-list>
I tried to keep it simple here, but there is more to it.
I suggest going through the official Angular tutorials, because they explain these concepts pretty well.
You should further try to put as much functionality into Services as possible. This also helps to make your components smaller, easier to reason about and helps testing.
E.g. a functions for check if data treated are correct would be a good example for a service method.
In html code, my project using data- attribute in several places like carousal, accordions, etc.
Is html data- attribute posing any security issue? Is there any better alternatives?
No, this is not a security issue, but a robust feature of modern HTML for storing and manipulating app specific data and making elements easily accessible to site scripts. Data attributes do not access or interact with databases, but serve to fill gaps where existing attributes are insufficient for the needs of your individual project, and their contents are made readily available to your site scripts via the .dataset property in the web API. They also help us to avoid storing certain kinds of information in class names, which would be inappropriate, and can be changed dynamically in the DOM.
There is language in the specification noting that the data contained in these attributes is "private" and that accessing it externally is "inappropriate" but this is not a matter of security but rather standards. They're not private in the sense that they shouldn't be accessible or that they contain sensitive information, but rather that they are specific to this application and its needed functionality, that they are subject to change by the site's scripts for it's own purposes, and they can't and shouldn't be relied upon outside of their own context.
Data attributes are primarily used to facilitate the scripts on the site by providing data for which other attributes are unsuitable. This is common in front end frameworks, where you want to be able to quickly apply complex UI interactions or layout changes by attaching options to a given element.
For example, Foundation has an option called Equalizer, which uses JavaScript to balance (or equalize) the height of parallel items within a common parent. One data attribute marks the container, another marks each item to be watched for height changes, and another optional attribute may contain options like whether the behavior changes when items are stacked.
I know there is this question on multiple inheritance/composition. However, it seems like this question is more about how to reuse functionality from multiple existing elements in other elements. And obviously, the solution for that are mixins.
I would like to know, how I can actually "decorate" existing elements without really borrow functionality from them. We know there is this extends property one can use to extend an existing element with Polymer.
So making a normal <button> behave like a mega-button is as simple as attaching <button is="mega-button"> and write a component for it. But it turns out, that it's not possible to extend multiple elements. So something like extends="foo bar" doesn't work. What if I want to build a web component, that can actually be applied to different elements?
For example, I don't want to only extend <button> elements with mega-button but probably also an <a> element so that it looks like and behaves like a mega-button too?
The mixin approach doesn't really help here (as far as I get it), because they do nothing more then providing shared logic for different web components. That means, you create multiple components, and reuse logic (packed in a mixin) from a mixin.
What I need is a way to create one web component that can be applied to multiple elements.
Any idea how to solve that?
UPDATE
Addy answered with some approaches to handle that use case. Here's a follow up question based on one approach
How to find out what element is going to be extended, while registering my own in Polymer
And another one on Is it possible to share mixins across web components (and imports) in Polymer?
UPDATE 2
I've written an article and concludes my experiences and learnings about inheritance and composition with polymer: http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/
If you need to have just a single import that has support for being applied to multiple elements, your element could include multiple element definitions which may or may not take advantage of Polymer.mixin in order to share functionality between your decorating elements.
So pascal-decorator.html could contain Polymer element definitions for <pascal-span> and <pascal-button>, both of which mixin logic from some object defined within pascal-decorator.html. You can then do <button is="pascal-button"> and <button is="pascal-span"> whilst the logic for doing so remains inside the same import.
The alternative (if you strictly want to do this all in one custom element, which imo, makes this less clean) is to do something like checking against the type of element being extended, which could either be done in the manner you linked to or by checking as part of your element registration process.
In general, I personally prefer to figure out what logic I may need to share between elements that could be decorated, isolate that functionality into an element and then just import them into dedicated elements that have knowledge about the tag (e.g <addy-button>, <addy-video> etc).
I would like implement a sort of choice using only Html and Css. I need to obtain a field where my user makes a choise and the latter leads to different forms. Precisely if my user decides to change his password will appear two input fields, or if he decides to change his information about his place of residence will appear four input field. Is possible this by using only Html and Css?
Sounds like you need to use a javascript library to do this bud. Don't think you can trigger this with just html and css. Though i may be wrong.