Static HTML sites with Markdown and Metalsmith


The language in which all websites and web apps are being presented on the web browsers is HTML. This language is what web browsers read, understand and render. In addition to HTML, web applications usually have dedicated JavaScript and style files.

In the dynamic web applications, HTML representation files are generated dynamically, in most cases by the web server. Web server application is using front end templates and data stored in databases to generate final HTML pages.

Static web applications, do not have the server app side. HTML and all corresponding style and JavaScript files are already created and just served by a web server as they are. This approach allows you to host your web pages on different platforms which support static HTML pages but not server side languages. Examples would be GitHub pages or even DropBox.

Building Angular.js Starter application

We have recently created example Angular.js web app with the minimal generic functionality. Small enough to be called framework but with built-in test cases, controllers and several views with user forms. The goal is to have a reusable foundation for Angular projects. This blog post is about how we designed Angular Starter structure. Part two of this posts is about consuming APIs with AngularJS.

Why Angular Starter

There are many tutorials on how to start application development with Angular.js. As well as a good few projects on GitHub with the Angular app skeletons. Like the angular-seed project created by Angular.js development team itself.

What we needed was a minimal project, with pre-built basic functionality and structure of communication with web services and APIs. And of course automated test cases.

We wanted test cases to get some special attention as we are big fans of TDD (test-driven development). Having the majority of test cases created even before any app functionality is coded is a good help to keep those bugs away.

I haven’t found the open source project which completely match my requirements and Angular Starter was born. It’s an open source project, hosted on GitHub and I welcome all suggestions and comments.

What exactly is its structure and how it can help to start your Angular apps?

Framework7 and Parse for User login

This is the second tutorial about building Framework7 HTML5 mobile web application. In the first tutorial part we have prepared the base by creating 3 mobile application views. One of them was the app user login view. In this tutorial part, we will make user registration and login functionality live by enabling login view communication with Parse -cloud-based backend service. The final third part is about wrapping Framework7 application into PgoneGap.

Creating Parse User Database

Nowadays you have many options once it comes to cloud-based storage options for mobile web apps. We did a good summary on HTMLCenter a few posts ago.

For todays tutorial, we are using Parse service. Parse at the time or writing supports 3 main functions – Core for data storage and user management, Push for push notifications and Analytics for logging different app events. They have free tier available for starting apps – it allows for up to 30 requests per second throughput and has 2TB data transfer limit per month. I’m sure we will not need this capacity in our tutorial!

Go ahead and create a free account on Parse. After you signup / login you can create new applications. I created one called framework7test dedicated for this tutorial. You can see it below.

Great OAuth tutorials for HTML5 applications

Applications we build are more and more dependent on 3rd party data sources. And as Internet of things continues to grow, this fact becomes even more stronger.

It allows us to create great experiences for the app end users by presenting them data gathered from across the Internets. But at the same time we have to spend more time ensuring that our applications are consuming all this data securely and they only get access to the data they need. OAuth protocol was designed and developed for this exact reason.

Building AngularJS based native mobile application. Part 2

This is the second part of tutorial for building native mobile application based on AngularJS, HTML5 markup and CSS styles. In the first part you will find how to setup the new project, add routes, controllers, HTML5 views and do simple testing in a standard web browser.

What we are doing in this tutorial?

In this tutorial part we are going to take previously created application and add back navigation button, sliding animations between the views and functionality to retrieve data from web services by using asynchronous HTTP communication. Finally I’ll give some hints how to wrap this application into PhoneGap framework in order to create installable version. Lets get started.

Crossing platforms between iOS and Android. Extending PhoneGap project

One of the main reasons to use hybrid mobile application framework like PhoneGap for development is to maintain you project code base in one programming language, while deploying mobile applications across many mobile platforms. PhoneGap is the wrapper for HTML5 applications to make them run on multiple mobile operating systems as native apps. Applications are written in JavaScript and framework provides API’s to access native mobile device functionality. Developers can even write their own plugins to get any specific native OS functionality they want.

I have recently published 4 piece tutorial about developing PhoneGap based mobile application for Apple iOS platform. In the beginning of that tutorial I promised to use the same application JavaScript code for another mobile app which is created to run on Android powered mobile devices. This post is about doing exactly that. I will share my experience of taking PhoneGap application code from iOS based app and moving it over to the Android platform. Some native elements will have to be changed but we will talk about them once we get there. Now, lets do some work.


Developer Resources