How do I choose the right JavaScript framework for my next single-page application project?
A question I have asked myself over and over again.
There are countless options these days, that claim to be the ultimate solution to all our developments needs.
I have build applications with
I have looked at
And I seem to be evaluating new options every week :)
The only answer I can give you is that :
In the end its a matter of personal taste and project requirements. We only have limited resources to finish a project and find solutions to unsolved problems in a timely fashion (yes this always happens). Go out and play :) Also take a look at TodoMVC, which might help you to decide. No guarantees !
Over the past few month I have evaluated all the things that I used in the past. I started stripping it all down to a bare set of essentials, that have been following me for a long time. There are solutions that just fit and require no replacement.
So my answer for the perfect framework, is a set of solid singular solutions that have proven themselves over the years. Working solo or together in harmony.
Like a painter I want to choose my own brushes and color mixture. Programming is an art that needs freedom. A freedom that can often be limited by a too strictly defined framework. Structure is important, but it should never dictate the options you have to fulfill your project goals and limit you.
I will be covering some of those tools here in coming articles.
I will talk about:
“Transparency is a minimal template engine for jQuery. It maps JSON objects to DOM elements with zero configuration.”
<%=foo%> or {{foo}} assignmentsAnother simple templating solution, that can speed up simple project tasks.
“jQuery Template is a plugin that makes using templates easy and quick. The plugin supports loading HTML files as templates, or taking a jQuery object as the template (usually using script tags to hold the template).”
Features
This is a nice and simple solution, with an easy learning curve ;) If you need more or would like to try other solutions, check the Template-Engine-Chooser :)
In a current project I am using pages as templates, to load content into specific containers on the website. The website will be using up to 15 different languages.
The main language setup is done through WPML, which creates linked content per language. This helps, as some languages will fail terribly when translating them through a pure gettext setup, as the words setup is often completely different.
But there is always static stuff that can be translated directly through the language files. For that I use a simple shortcode that allows me to keep the native language as a basis in all linked content. Easier to move around, as I can actually read and understand it :)
Call the shortcode from the functions.php
|
1 |
add_shortcode('quick_trans','do_quick_trans'); |
The shortcode function itself. This loads the language textdomain from the specified location and translates the string.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function do_quick_trans($atts, $content) { extract(shortcode_atts(array( 'location' => 'PATH_TO_LANG_FILE', 'lang' => 'LANG_TO_USE', 'textdomain' => 'TEXTDOMAIN' ), $atts)); load_textdomain($textdomain, $location.$lang.'.mo'); $content = __($content, $textdomain); return $content; } |
How to use it in your post or page content
|
1 2 3 4 5 6 7 8 |
German [quick_trans lang="de_DE"]Simple is nice![/quick_trans] Spanish [quick_trans lang="es_ES"]Simple is nice![/quick_trans] Spanish - Latin America / with a special path for the lang file location [quick_trans lang="es_LA" location="/wp-content/..."]Simple is nice![/quick_trans] |
Conditional Tags are a powerful thing in WordPress and especially handy to show or hide things.
“The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. ”
Two plugins are part of my essentials, that utilize the Conditional Tags:
You can easily define your own Conditional Tags in your functions.php or plugin.
This time picker provides a unique way to enhance your input fields. Use a clock interface to enter the time. The plugin works with Bootstrap or standalone.
Part of my essentials :)
Datedropper is a jQuery Plugin that provides a quick and appealing interface to enter dates. Nice little plugin to spice up your interface.
Definitely part of my list of essentials :)
|
1 2 3 |
header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Content-type: application/json'); |
The first two headers prevent the browser from caching the response and the third sets the correct MIME type for JSON.
Than just output your JSON data
|
1 2 3 4 5 6 7 8 9 10 |
$data = array( "fire" => 1, "water" => 0, "earth" => 1, "air" => 1, ); echo json_encode($data); exit; |
“NextGEN Facebook (NGFB) gives you total control over the information social website crawlers need, improving Google Search ranking, social engagement, and click-through-rates on Facebook, Google+, Twitter, Pinterest, LinkedIn, StumbleUpon, Tumblr and and many more”
A powerful plugin for WordPress, but it sometimes displays many image dimension errors. Even if those errors remind me to optimize the page or post, I sometimes prefer to ignore these during development :)
Here a simple way to hide them:
|
1 2 3 4 5 6 7 |
add_action('admin_head', 'hide_ngfb_errors'); function hide_ngfb_errors(){ echo '<style type="text/css"> [id^="err_err_wp"]{display: none} </style>'; } |
