I am working on creating a jQuery plugin and I have some questions regarding how to structure things:
1.How much HTML should the plugin have written and how much should it create through jQuery ?
Is it good to have written all of the HTML so that the entirety of the markup structure is visible when looking over the code ?
Or is it better to have written only the minimum amount of HTML so that it is very easy for the user to add/modify content and create all of the rest, bulky HTML through jQuery ?
Is there a recommended practice ? How are things done in professional plugins ?
Why should things be done in a certain way and what are the reasons behind it ?
2.How to balance the plugin options with the CSS ?
Should the plugin offer options that would affect the presentation of the plugin (options that would modify the stylesheet) or is it a better practice to have the user directly modify the stylesheet for presentational modifications and in the plugin only have options relating to the functionality ?
What are some guides regarding what options to offer in the plugin as to not step over CSS ?
Regarding my experiences, I have seen all of these in different places and plugins and that is why I am asking for opinions from experienced users and what are good practices and why.
1. How much HTML should the plugin have written and how much should it create through jQuery ?
According to the paradigms of progressive enhancement, there should be no markup which would be useless in case of no JS enabled. In other words - if your plugins needs some special markup and additional tags it should create them by itself.
The reasons for that is semantics. Additional plugin markup is useless for users (and bots) when there's no JS enabled and thus it should not be present at all.
Also keep in mind that developing a good JS plugin means that content will still be available when the plugin fails or JS is disabled. Moreover, you have to take additional care about making sure that your plugin is accessible. More on the topic of progressive enhancement covering also more advanced issues can be found for example in a book by The Filament Group.
2. How to balance the plugin options with the CSS ?
Do it as follows:
Content: HTML
Logic: JS
Presentation: CSS
Despite the fact it's changing now a bit (think CSS3 animations), options of the plugin may influence the way it works rather than the way it looks. That means your users should be able to config timings, delays, speed, number of element or whatever your plugin is doing through JS. But leave the presentational aspects in the CSS stylesheet. Use JS to change classes of elements rather than inline styles and let your users write whatever CSS they want. Obviously, don't forget to provide some default styling :)
I always recommend reading more on the topic in A List Apart. It's quite a theoretical article but absolutely a must-read for any front-end dev.
Tutsplus has a jQuery course with usefull videos.
http://tutsplus.com/lesson/head-first-into-plugin-development/
This is one of the videos that explaines how te make a plugin.
There are a lot of ways to create a plugin, but this is a good one.
Related
I have to improve website under web accessibility.
I am adding aria attributes directly in html where possible in Drupal, but there are things that I can not add in html, like carousels and slideshows, so is it okay to add aria attributes to an element after document is loaded.
like
$(document).ready(function(){
$(".item").attr("aria-label", "My Label");
});
Yes it is acceptable to do this if you have no other options.
However be aware that this isn't a 100% fool-proof way of doing things with certain screen readers (it should work correctly in the latest versions of NVDA, VoiceOver and JAWs).
Some older screen readers will build the accessibility tree on document load so it would be prudent (if somewhat of a bad practice but the best workaround I can think of) to do it via vanilla JS as an inline JS block in the footer.
This may not be possible given your current setup, if that is the case then the way you suggested is acceptable and the best you will be able to achieve in a reasonable timescale.
If you really want to fix it (and you should!) - have you thought about replacing the offending plugins / libraries (or extending / editing the libraries / plugins) to add the required elements when the HTML is generated. That is how I would handle this.
Is it possible to have multi-line in select option value
In the multi line option I would like show first line in bold and rest of lines in regular font.
Is there any possible approach using HTML/CSS and Java script or
Do we have any library in React which can achieve the above
It is not possible with current support of the select tag in current HTML version. The only possible solution here is to use a custom made solution, both vanilla CSS or javascript options are available, and you have plenty of techniques to choose from.
Whenever I found myself in a need of creating a custom solution I like to look for inspiration in this article:
https://tympanus.net/Development/SelectInspiration/index.html
Once you decide to go with custom made solution it is always a good practise to implement at least basic Screen Reader support.
A good place to start: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Best_practices
From my experience in business projects I usually prefer to go with JS powered solution, especially in such where frontend is changing a lot. My favourite here: https://select2.org/ which is both easy to customize and powerful enough to meet even the most challenging requirements, and you can't forget about really good docs.
As I can see you included a reactjs tag in your question, so if you are planning to create a react solution I would go with:
http://jedwatson.github.io/react-select/
which is pretty similar in functionality to Select2
I would like to offer my users the ability to customize the look and feel of the website.
I am giving them a color picker to choose a color scheme. I would like to dynamically generate few matching colors and apply them.
My questions are:
1.) How can i generate a color scheme based on the choosen color ? (some matching colors and contrasting colors for the background)
2.) What are the best practices for achieving a themable interface ?
I am writing an AngularJS SPA app with pure HTML with REST API as backend.
Right now for my 2nd question, I am retrieving the color setting and applying them for body.
<body style="background:color:{{bgcolor}}; color:{{fgcolor}}">
I am looking for something more elegant.
You can do this with ngStyle as you have above... but as you noted, it's not very elegant.
The simple truth is that nothing in AngularJS itself is really designed to address this problem other than the ngStyle directive itself. However, while I haven't exactly seen a "best practice" for this, you might take some ideas from Drupal's "Color" module, which is one of its base/core modules. You can do the same thing in Angular very easily.
What this does is go back to stylesheets, which I'm assuming you skipped over because it didn't seem like an obvious solution for something dynamic. But they have a clever answer. In a piece of code, after the user picks a color, they write out a stylesheet with a unique ID for its filename. They put these in a directory where other user-uploaded assets are kept, so they don't mix with core site code (minimize the potential attack vector). Then they only need a simple rule in the page to include the stylesheet itself.
You can easily emulate all of this with Angular, although you'll need your server's help, of course. But the nice thing about it is it's much easier for you to maintain. Instead of having to "sprinkle" ngStyle directives all over the place (one on everything you want styled) and potentially having conflicts with other things you want to do on some of those elements, the stylesheet can work exactly the way it's supposed to: using classes to target specific elements. You can make a template stylesheet that's easy to maintain, so that's a natural fit... and the best part is, it's easy to hook everything up.
I'm switching from using JQM and Phonegap to using Topcaot and a few smaller libraries to take care of transitions and such. One thing I haven't found a micro-library for is the navigation.
While many site I've seen say to create the UI and content dynamically through javascript, it does seem like a daunting task do to the amount of pages I would need to create. Similar to JQM, I want to be able to separate my different pages as different html files that ajax load them into the DOM, but in an optimized way that is fast and doesn't cary the weight of JQM.
TO anyones knowledge does such a library exist or would this be a library I would have to write? It doesn't seem like it would be an overly complicated task, especially if I would use jquery. Any ideas of help is appreciated.
try angularjs. Here there's an example with topcoat: http://coenraets.org/blog/2013/11/sample-mobile-application-with-angularjs/
Angularjs is very different from JQM but you should give it a try.
Otherwise, if you don't like angularjs you can find a more traditional approach at this page: http://coenraets.org/blog/2013/03/hardware-accelerated-page-transitions-for-mobile-web-apps-phonegap-apps/
Hope this helps
Here you are - new plugin based on coenraets css transitional solution: https://github.com/linslin/pagingSlider
Features:
Paging with pagingSlider
default pageSlider actions
Pagebrowser
Totaly plugable like pageSlider
if you want, pagemenu to switch directly to a page
touch events
Consider looking at Topcoat Touch (Github Project), it is basically a micro library for transitions and events (5k minified and gzipped) -- full disclosure, I am the author of Topcoat Touch.
It is a very simple framework that uses Topcoat to create the UI, inspired by jQT and to a lesser extent jQuery Mobile. It can be either a single html document with multiple pages contained within the same document, or using a collection of controllers and templates. It uses a collection of optional libraries to provide most of the functionality for a mobile framework and has a generator for Yeoman to get the scaffolding up quickly.
I haven't used it, but Kendo UI Mobile is similar to JQM and may fit your needs: http://www.kendoui.com/mobile.aspx
I was looking at what YUI had, http://developer.yahoo.com/yui/examples/button/btn_example07.html
Can anyone recommend a library/plugin they used to progressively enhance native select element dropdowns at the request of a client? I know it's impossible to style a dropdown in IE, so it's either this or Flash which I don't want to get into.
I'll still leave the regular dropdown in the source for non-JS users and serve the dropdown replica built out of non-form control elements.
Assuming you mean a different library than YUI, I like dojo's dijit.form.FilteringSelect.
Turns out it wasn't all that difficult, pretty much the same logic as a dropdown menu except with a little extra for the toggling bit.