I am a Full-Stack Web Designer from Provo, Utah. I currently work at GOLDPoint Systems in Provo, Utah as a Full-Stack Designer. We make financial lending software for lending institutions.
Nothing here yet.
No blogs yet.
Thank you for this great summary. There is one thing that tripped me up whilst creating an application that was embedded inside another site within an iFrame. If a user disables Third Party Cookies, then the Web Storage API is not accessible. Even though it's not a cookie, and that the parent site cannot access the cookies inside of an iframe, it's still blocked.
Here is my solution. hopefully, it's self-explanatory. I've created a class that accepts three parameters; a node list of select elements, the excluded option value, and a max number of occurrences. var selects = document .querySelectorAll( '[js-select]' ); var optionCheck = new OptionCheck(selects, 'Ppl' , 2 ); At startup and after every change event, I set values and then check values. If there are as many selected options as there are the max number of occurrences, then the other select's option is disabled.
I really like Angular's approach with ViewEncapsulation . The native option creates a Shadow DOM; which isn't widely supported yet. The emulated option creates a unique attribute that is attached to everything associated with that component/directive. This is a good article to read on the subject A good way to avoid class collisions would be to use the BEM CSS class naming convention.
I would agree with one caveat; that the arguments must include graphable data. You cannot say, I make new projects faster. You should say, I increased the production time of new projects by 40% by creating a company-wide design framework.
@magalielinda, I still don't believe that they're supported enough to use in production, and I don't believe that there is a solid method of implementing CSS variables into any pre-processor. What I mean by run-time changes, is that the CSS variables are stored in memory. It will only read the stylesheet once and every time the variable is changed in JavaScript, it only changes the reference and doesn't rewrite the CSS file. Imagine you have a website that the main color scheme is controlled by the user. To maintain the separation of concerns between HTML, JavaScript, and CSS, you'd be better off setting a CSS variable in the stylesheet that the whole scheme was built upon, and only let JavaScript change that one color value. The whole stylesheet would reflect that change at run-time, not compile time. Mainly because the browser cannot write to the CSS file and change it. You don't have to have separate stylesheets for each set color theme, they could literally pick any color. I hope this makes sense.
I believe that native CSS variables are going to revolutionize the styling industry. The only thing holding us back is IE and Edge. We must accept that IE 11 will never support them, and Windows has stated that IE 11 will be around for as long as they support Windows 10. "Internet Explorer 11 is the last version of Internet Explorer, and will continue to receive security updates, compatibility fixes, and technical support on Windows 7, Windows 8.1, and Windows 10." I also believe that CSS preprocessors like SCSS, Less, and Stylus are going to continue to exist as well. Mainly because of functions, mixins, and partials. However, there is no need to fret, because preprocessors can still use native CSS variables. I created a quick Codepen illustrating the uses of CSS variables. If you have a 4K monitor without scaling, you'll be able to see the desired effect. The fantastic thing about CSS variables is that they are compiled at runtime. That means that if you change a CSS variable in JavaScript, it'll cascade in real-time. Here is another fun Codepen that uses RxJS, RxCSS, and native CSS variables.