IoT is the current buzz word and I will be doing some more tinkering with current solutions this year. I have done projects with Arduino , Raspberry Pi and looking into relayr / Wunderbar right now.
relayr provides a tech stack with Wunderbar, that easily connects included sensors with the cloud. They provide a wide range of API endpoints to collect data and even integrate hardware solutions like Arduino orRaspberry Pi.
„The WunderBar is built for software developers. It is a powerful rapid prototyping and product development tool that enables developers to immediately start creating products and solutions that utilise the Internet of Things, without any prior hardware knowledge. No soldering or electronic engineering experience is needed. Just choose what sensors you need for your project and start coding.“
Starterkit should arrive next week …
Shepherd is a javascript library for guiding users through your app. It uses Tether, another open source library, to position all of its steps.
We should always try to make our apps as self-explaining as possible, but sometimes features need to be showcased or explained. This helps you to do a quick first-start guide for new users.
„The picture element, srcset and sizes attributes, and associated features allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today!“
1 |
<img srcset="examples/images/large.jpg 1x, examples/images/extralarge.jpg 2x" alt="…"> |
1 2 3 4 5 6 |
<img sizes="(min-width: 40em) 80vw, 100vw" srcset="examples/images/medium.jpg 375w, examples/images/large.jpg 480w, examples/images/extralarge.jpg 768w" alt="…"> |
Using WordPress as a headless system, is nothing new. You can easily build out your own REST API or use the long available HTTP REST API 1.0+ for WordPress.
But with the new HTTP REST API 2.0+ its getting really easy to build out your own REST API Namespace and assign routes for all your JSON needs.
The new REST API will make its appearance in WordPress 4.4, but you can start now by adding the plugin to your system. When the plugin detects 4.4+ it will only load functionality not already present in the core.
A route tells the API to respond to a given request with a specific function (endpoint). This adds the permalink structure to WordPress so that your functionality can be accessed via an url like this: http://yourdoman.com/wp-json/yourplugin/v1/myfunction/your_parameter
1 2 3 4 5 6 |
add_action( 'rest_api_init', function () { register_rest_route( 'your_namespace/v1', '/your_endpoint/(?P<your_parameter>\d+)', array( 'methods' => 'GET', 'callback' => 'your_endpoint', ) ); } ); |
The Endpoint is the callback handled by the route. Each endpoint can have additional parameters attached:
The return values from the endpoint are converted into JSON. You can use the WP_REST_Response object , this wraps normal body data and allows you to return a custom status code.
1 2 3 4 5 6 7 8 9 10 11 |
function your_endpoint( $data ) { $posts = get_posts( array( 'author' => $data['your_parameter'], ) ); if ( empty( $posts ) ) { return new WP_Error( 'your_endpoint_no_data', 'No Data', array( 'status' => 404 ) ); } return new WP_REST_Response( $posts, 200 ); } |
Really powerful stuff, that makes it easy to detach WordPress and the actual client using the data provided by it.
You can read more about it here.
Flarum is new elegant next-generation forum software. It provides a touch optimized two pane layout with floating composer.
The backend runs on PHP/MySQL.
Javascript Error tracking is becoming more and more important, with applications moving to the client. Many service providers already offer a variety of extensive error tracking solutions for a price. These providers help to get around browser limitations and get the most out of errors.
Depending on your budget, that might not always be an option and not always needed.
To the rescue comes ErrorBoard, that provides a basic interface to track window.onerror events. Requires Node.js, NPM and a free port.
Here the window.onerror, how I set it up for now:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// checks if there was a previously defined window.onerror and preserve it var oldOnError = window.onerror; window.onerror = function( message, url, line, column, error ) { if (errorMsg.indexOf('Script error.') > -1) { return false; } try { var e = encodeURIComponent; var meta = '{"project":"portalzine.de"}'; ( new Image() ).src = 'http://UrltoErrorBoard/error?message=' + e( message ) + '&url=' + e( url ) + '&line=' + e( line ) + '&meta=' + e( meta ) + ( error && error.stack ? '&stack=' + e( error.stack ) : '' ) + ( column ? '&column=' + e( column ) : '' ) ; } catch(e) { // we don't want errors to throw inside onerror } // Call any previously assigned handler if (typeof oldOnError === 'function') { oldOnError.apply(this, arguments); } // returning false triggers the execution of the built-in error handler return false; }; |
1 2 3 4 |
var el = document.getElementById('YourElementID'); var e = document.createEvent("MouseEvents"); e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); el.dispatchEvent(e); |
This often comes up, when you work with jQuery and try to do a simple $(„#YourElementID“).trigger(„click“); or similar.
This video should give you a good idea what the addon can actually do.
In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:
The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.
Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.
Regards
Alexander
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: