Develop Reference

Programming a graceful fall-back from JS to non-JS experience

I am a web developer and created a non-JS social networking website where everything works perfectly for devices not employing JS, including form submission (lots of page refreshes).
Who is using non-JS devices in this day and age? A non-trivial chunk of my users.
Why are they using non-JS devices? Because they originate from a forward proxy that removes JavaScript. Or, some of them have non-smart feature phones where JS doesn't exist.
The navbar of my website currently looks like this:
I recently had it redesigned to this scrolling experience:
Is it possible to create an experience such that JS supporting devices see the latest navbar, whereas all other devices keep on seeing the old static navbar?
If so, how? Can someone give me a basic example of how to do this?
Note: I'm aware that pure CSS solutions exist too, in which case JS doesn't even enter the discussion. However, such a solution could still potentially exclude my most primitive device users. The best solution for me would definitely need some kind of a 'fallback' to the static navbar. Please advise accordingly.

Sure you can provide two different sites and use the noscript-tag to tell the user he or she should take the other page if javascript is not available.
The better way in my opinion is to build the switch inside the code and only show the content that is ideal for the current user.
The common way to achieve this is the following:
Add the css class no-js to the html-tag
Add a small javascript script portion that removes this css class (or replaces it with js
build your css like always but if you want to provide different stylings (or hide / show specific elements) prepend the css declaration with .no-js or .js
In your case you could have both navigations inside your html markup and display only the navigation that suits the current user.
This "trick" works btw with every switch you want to build (for css rules). If you want to build a cool font effect and set the color to the background color and add a shadow it's realy bad if the shadow is not visible because the users browser is not able to understand the text-shadow css rule. So you can build it with a fallback like this:
.cool-font-effect {
color:black;
}
.textshadow .cool-font-effect {
color:white;
text-shadow: 2px 2px silver;
}
and use js to detect if the users browser can use text-shadow:
var isTextShadowSupported = ()=>document.createElement("detect").style.textShadow==="";
if(isTextShadowSupported())
document.querySelector('html').classList.add('textshadow');
BTW: This is the way Modernizr works. If you like that and don't want to build all the tests yourself take a look at it. Th tests are fast and you can test against nearly every feature in html, css and javascript.

Copying bootstrap form elements from one theme to another

I'm building my first Yii2 app in bootstrap and I was looking at a few templates to base the UI in. The problem is that each one offers a few unique form elements that I like. Is it relatively easy to copy form elements from one theme to another?
For example, copying the Ui Elements > Tree View from http://wrapbootstrap.com/preview/WB0B30DGR into another template like http://wrapbootstrap.com/preview/WB0F0419C.
Thanks!

Depending on your experience in CSS and Javascript. I also customized on several occasions templates bootstrap changing some elements. First, it is whether you intend to do only the changes to the graphics and then only the changes to boostrap.css or if you want to supplement / modify the parts managed via javascrit. For graphics all template-type bootstrap behave the same way, then it needs to identify exactly which categories you care about and modify them with the catatteristiche want. For the part controlled by javascrit the situation is similar only the most delicate and complex.

Customizable/Themable UI

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.

How to control the appearance of a widget on client web sites CSS

We have a js/html/css widget that we use on our client's web sites and have noticed on some sites, it does not display well due to the css from the page cascading through and messing with the layout, like if the designer of the web site has a bunch of css applied to ALL divs on the page, etc..
Is there an easy way to apply styles to the container of my widget so that the invasive css won't disrupt the layouts?
How do you guys handle this scenario?
Thanks,

This is a common problem. What I use is this: https://github.com/premasagar/cleanslate
A common css reset stylesheet doesn't suffice. Those reset/normalize the browsers default styles. They don't clear those created by the author.
Also, by the same author https://github.com/premasagar/sqwidget - it handles the css resetting plus a few more important things.
While I'm at it, here's another one from the team at Olark: https://github.com/olark/lightningjs It's similar to the last one, but with a few more features, and, therefore, more complex. I haven't used this one.

You could take a look at Shadow DOM. That is perfect for widgets like yours. Shadow DOMs don't allow the parent webpage to access the DOM of your widgets and CSS rules cannot reach your widgets.

I would put the widget in an Iframe that you host yourself. This solves the issue. You can give your clients the code for the embeddable iframe.
This is one of the reasons the big sites, twitter, facebook use iframes for their widgets.

Preferred customizable progressively enhanced dropdowns/menus?

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.