Welcome to Moov2 Labs
Moov2 Labs is our playground for new ideas, experiments and technical exploration. We put this site together as we wanted somewhere we could easily share some of the smaller developments we do as part of our commitment continuous learning.
All of the source code from Moov2 labs is open source and available on github here https://github.com/moov2/moov2-labs.
View our main company site at moov2.com.
HTML5 Responsive Images
With the increase growth of people using mobile to browse the Internet it has never been more important to improve page speed.
Images can have a huge affect on page speed so it is important to serve the right image for the users context.
When a user is browsing the Internettheir mobile and currently hasn't got a wireless connection, then it would make more sense to serve a lower quality image that has a smaller file size.
However, if the user is on a fast Internet connection on their desktop PC then they desire the better quality images.
Currently HTML doesn't offer the markup to support defining the appropriate images based on the device and context, so people have taken it into their own hands here are some of the suitable solutions.
Responsive Images
.Net MVC Boilerplate
Here at Moov2 we love building software projects, and we like to think we're pretty good at it.
What we're not so keen on is performing the same arduous setup process for every new project.
Enter .Net MVC Boilerplate, our offering to the development community that can kickstart web development projects in seconds saving hours of setup and allows focus on key functionality not framework setup.
Checkout our .Net MVC Boilerplate project on github
HTML5 Geolocation services
With the massive uptake smartphones and an increasing usage of internet on-the-go, users are accessing web applications from more locations than ever before.
HTML5 introduces the Geolocation API which offers the ability to detect a users location for use within applications.
Whilst this is especially relevant on mobile devices (which commonly have GPS functionality), this feature is also being added to modern desktop browsers too.
The ability to easily capture location data in applications opens the opportunity for significant data and reporting uses. View the simple example below to see your current location (note we're not storing any location information).
Location Demo
Local Storage Demo
HTML5 introduces the ability to leverage Local Storage. Local storage enables us to store information that users work with on their computer instead of relying on storage provided by remote servers. This offers several benefits:
- Offline working - the ability to store data locally allows users to continue working even when not connected to the web.
- Reduced bandwidth - no need for the sending and receiving of data that doesn't need to be stored centrally reduces bandwidth requirements and also offers performance gains.
- Privacy - if information doesn't need to be stored centrally users can work with web applications safe in the knowledge their data isn't being sent over the web
The simple demo of local storage that we have implemented here lets the user create some formatted text using a WYSIWYG editor and periodically, automatically, saves their creation to local storage in their browser. The content is saved whenever the user makes changes so that even if they accidentally close their window or navigate away they can still come back to it later.
Local Storage Demo
Web Sockets Demo
Traditionally any frequently updated information within a web page would rely on either third party plugins or a technique known as polling where the browser would make continious requests to the server to check for any updated information.
This apporach is not only cumbersome but can lead to huge amounts of wasted bandwidth which can prove costly. Enter HTML5 and Websockets. Websockets provide a persistent connection to a server resource allowing instant server to client notifications without the need to keep checking for changes.
Below is a simple example of a real-time chat demonstrating the concept. When new messages are added a push notification is sent to all connected clients.
Web Sockets Demo