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.

How AngularJS communicates with web services

Few posts ago I have created a simple open source AngularJS project named Angular Starter. The structure and overview of Angular Starter is covered in one of HTMLCenter blog posts.

This time, I’m going to introduce the example of http communication to Angular Starter application in order for the web app to communicate with cloud-based services. APIs and web services are usually the main sources of data for Angular.js applications and a good example always helps.

Angular Starter Update

Recent Angular Starter source update has introduced example communication with web service in order to retrieve users IP address before proceeding with login. web service is great for testing various API requests. It can mock many example API responses, including but not limited to xml, json, html and it even supports streaming response examples. Angular Starter project uses this service for receiving IP address of the client application.

How to Customize Bootstrap – The Resources You Are Looking For

As we all know, Bootstrap can be used for multiple purposes and is capable of running any type of site. However, when it comes to the appearance of its individual elements – things like content blocks, forms, buttons – it’s very easy to spot the typical Bootstrap footprint, so to speak.

As a result, many Bootstrap sites seem to look very much alike.

Note. This is part three in our Bootstrap series. Previously, we talked about whether or not you should be using Bootstrap in the first place, and we also listed the ultimate set of Bootstrap resources for developers who want to get started with the framework.

This time, the topic is about customizing sites built with Bootstrap framework.

Or in other words, what we’re going to be focusing on today is how to make your Bootstrap site stand out from everyone else’s.

How Framework7 and PhoneGap fit together

This is the final part of HTMLCenter tutorial about Framework7 mobile HTML5 framework. In previous part one we have created a skeleton mobile web application with several views. In part two we added login functionality and communication to cloud-based service APIs (Parse BaaS). This final part is about wrapping up the existing Framework7 application into PhoneGap (Cordova) wrapper and creating native mobile app as a result.

PhoneGap is a popular choice among mobile web app developers to package their HTML5 applications for distribution as native mobile apps. PhoneGap framework is based on Apache Cordova open source project which provides this exact functionality. It also supports custom plugin system which lets developers hook into native mobile OS API’s.

We are going to start new PhoneGap project and add our existing Framework7 application in.

Ultimate Collection of Resources for Developers Starting With Bootstrap

A couple of weeks ago, we published a general overview of Bootstrap and its pros and cons. Basically, the goal was to help you decide whether or not Bootstrap is a platform worth using for your next web development project.

Feel free to check that post right now if you haven’t already (link).

Some of you have expressed really strong opinions in the comments section under that post, which only proves that Bootstrap framework remains to be one of the hot topics in the web development world today. So as a follow-up, this time we’re taking a look at some of the most useful Bootstrap developer resources from around the web.

This list goes through various types of information, tutorials, and tools related to Bootstrap framework. I’ve divided it into a handful of categories just to make everything a bit easier to grasp and allow you to skip things you’re not interested in.

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?


Developer Resources