This post is about two fast and furious Web developments. First is the emergence of W3Schools.com as a vital tool for Web Development and the second is the proliferation of so many Javascript Frameworks for SPA-Single Page Applications. Now many of my Web Development colleagues regard W3School as the Mickey Mouse Club of Web Development. They just have not visited often enough to see the ever broader Full Stack Development tutorials available. But W3Schools has taken its tutorials up a notch by offering unique Web tools like AMMPL and W3CSS. It is the latter, W3CSS , which will be emphasized in the next 3 or 4 tutorials on theOpenSourcery.
As a fast and responsive CSS Framework, W3CSS is not only easy to learn but also provides a wide array of UI Widgets and elements with a minimal JavaScript overhead. This is a very good good framework that deserves a thorough examination and review. Coupled with W3CSS is Knockout.js one of the almost too many JavaScript Responsive Frameworks that have come to the Web in the last 2-3 years.But Knokout has the ability to apply multiple View-Models to a a Web Page which makes for robust and fast interactive Web Apps.
The following live program shows three examples in menu tab format to illustrate interactively both frameworks in action.
[iframe src=”http://theopensourcery.ca/javascript/w3ko.html#” width=”100%” height=”700″]
The starting screen shows the versatility of W3CSS, as you see w3-header, w3-tab, w3-content, and w3-footer blocks. In the w3-header and w3-footer, w3-teal color is the fill so the font-color automatically switches from black to white. Click on any of the w3-tab menus and the Knockout demo will instantly appear. For example the Seat Reservations tab demonstrates how Knockout can be used to fill in a table dynamically. By adding class classes to the <table class=”w3-table w3-striped w3-border”> class tag, the table is completely restyled. Likewise add a class to the.<thead class=”w3-teal”> tag gives the table a green header with striped lighter green and white. But hover your mouse over any row and the row becomes a light grey. This is the wp-hoverable class in action.
Next click on the Voting Preferences Tab. This reveals a Pseudo Political Survey again using Knockout to fill in the table. As you can see the table is styled with W3CSS just as before. But the second column, Importance, has 5 dropdowns which which allow users to rate from 0 to 5 each of the survey options. Knockout enables this embedding of the dropdowns directly into the table.Click on the Finsihed button, note how the button sports a dropshadow courtesy of W3CSS. And the resulting modal is easy to insert in your HTML because W3CSS hides the markup until needed.
Summary
Both tools, W3CSS and Knockout, are impressive. W3CSS provides a Google Material Design like style with builtin in responsiveness and templates that are very compelling given the price of FREE. And there is the super W3schools TryIt documentation available for throughout the comprehensive Guide to W3CSS:
This is a Web keeper which theOpenSourcery will be exploring with several more posts in coming weeks.
But Knockout is no slouch either in documentation and tutorials:
Knockout has not only 5 graded tutorials [3 of which are adapted here] but a load of examples/demos along with complete documentation. The problem that Knockout and Web developers share is the fact that there are at least half a dozen very good JavaScript frameworks vying for Web Developers attention and use:
Angular 1.5 – Google inspired
Angular 2 – very different in syntax to 1.5
Backbone.js – first on the scene
Ember,js – many special features
React.js – WordPress Calypso and Facebook adopters
Vue.js – clean overall design
The Opensourcery will try to provide some helpful guidance on these tools in the live, interactive style as done in this post. By the way if you go here you can see the full screen version of the code iframed in this post.