Why Cloudflare Pages?

Multiple options exist for static website hosting. This time we will explore the Cloudflare pages option.

Cloudflare pages have free and paid tiers.

At the time of writing this post, their free tier provides:

• Unlimited sites
• Unlimited visitor bandwidth
• 100 custom domains per project

This is more than enough even for a website with a large number of users.

In addition, Cloudflare has one of the most robust cloud platforms globally and they are well known for the web and edge security solutions.

Good reason to explore the process of hosting web pages on their platform.

Prepare your project

What will you need to follow this tutorial and to deploy a static website to Cloudflare pages?

• Cloudflare account – if you don’t have it, create one with a free plan.
• GitHub account
• Static website. You can use the one we have created in the earlier tutorials)

Connect GitHub to Cloudflare

Cloudflare provides good documentation that covers website hosting setup.

Log in to your Cloudflare account, and find the Workers & Pages section on the left menu.

Once you are in this area, select Create an application option.

We could deploy static webpages with CLI but, connecting the GitHub repository will allow us to automate future deployments in a version-controlled way.

The process of connecting the GitHub repository is straightforward and follows the standard OAuth flow.

You will be redirected to GitHub auth to confirm the authorization and select what access you provide to Cloudflare.

Select the single specific repository you use for your project code. We don’t want to give Cloudflare more access than is needed.

Next, you will be asked to provide specific details about the static website project.

Including the build command and the build output directory.

This is required as before deployment Cloudflare will run the build and will use the static website assets from the output directory.

Enter the commands you use, or use the following if you trying out our sample website.

You can optionally provide environment variables if your website uses them.

Once settings are saved, Cloudflare will run the build and will enable your static website hosting.

It will also generate the public URL.

The option to add a custom domain name is also there.

Make changes

As GitHub is now connected to your deployments, every time you commit new changes to the main branch, Cloudflare will perform a new code upload for your website.

It’s all automated.

You can always check the status of your static site and which code commit is deployed by going to the Workers & Pages section and selecting the project.

Here is the information you will see.

Notice the deployed commit hash, timestamp, and the actual URL for the website. In my case, it’s 11ty-static-web.pages.dev

Summary

In this tutorial, we have deployed a simple static website to Cloudflare pages hosting.

It didn’t take long and was intuitive.

You can create an unlimited number of such sites, and up to 100 custom domains pointed to your projects.

The comments section is open under this post in case you want to discuss your experience with Cloudflare.

The post Static website hosting with Cloudflare pages appeared first on Htmlcenter Blog.

In the previous part, we created a static website structure, configuration, pages, and links. This tutorial part is about adding CSS styles, dynamically generated pages, and dynamically generated sitemap. 

CSS Styles

Let’s remember what was the structure of the website code at the end of the previous tutorial part.

/
└── 11ty-static-website
    ├── content
    │   ├── _includes
    │   │   └── base.njk
    │   ├── about.md
    │   ├── index.md
    │   └── blog
    │       ├── blog-post-a.md
    │       ├── blog-post-b.md
    │       └── blog-post-c.md
    ├── .eleventy.js
    └── package.json

To add styles we will create a new directory under the content directory called css. It will hold our stylesheet files.

In this directory create a file called bundle.njk. Notice the extension of this file. It’s not an actual stylesheet itself, but rather the template.

Through this template, we will instruct the 11ty generator to combine a few CSS files into one single stylesheet file. It’s a good mechanism which allows us to split CSS stylesheets into meaningful pieces and produce only one style file during static website generation.

---
permalink: /css/bundle.css
eleventyExcludeFromCollections: true
excludeFromSitemap: true
---
{% include "content/css/reset.css" %}
{% include "content/css/variables.css" %}
{% include "content/css/styles.css" %}
{% include "content/css/syntax.css" %}

A few things are happening in this template.

permalink specifies the final location of the output CSS file after it is generated. All include statements import separate CSS files from the css directory.

You can find and copy all CSS files mentioned in the above snipped from the example code repository on GitHub.

Next, for the 11ty generator to copy the final CSS file over to the destination we will have to insert the addPassthroughCopy configuration to the .eleventy.js (see the directory structure).

// 11ty setup
module.exports = function(eleventyConfig) {

    // passthrough paths
    eleventyConfig.addPassthroughCopy("content/css/bundle.css");  
  
    // minify html output
    eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
        if( this.outputPath.endsWith(".html") ) {
            const minified = minify(content, {
                useShortDoctype: true,
                removeComments: true,
                minifyJS: true,
                collapseWhitespace: true
            });

            return minified;
        }
        return content;
    });

    // custom shortcodes
    eleventyConfig.addShortcode('version', () => `${+ new Date()}`);
    eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`);
    eleventyConfig.addShortcode('build', () => `${new Date().toISOString().split('T')[0]}`);

    return {
        dir: {
            input: 'content',
            includes: '_includes',
            output: 'dist'
        },
        markdownTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        dataTemplateEngine: 'njk'
    };
};

In addition to addPassthroughCopy, you will notice I added a couple of new functions to the file.

eleventyConfig.addTransform allows us to transform the HTML during generation. In our case, we want to minify it (reduce the size of HTML pages).

eleventyConfig.addShortcode adds the short codes, we can use within the template pages across 11ty projects.

Once you copy all CSS files from the reference project, your website should now have lean styling and look something like this

Sitemap

Next, we will add a sitemap.

Add the file called sitemap.njk to the content directory. This file is a template, which has logic for how the actual sitemap XML file is generated. Here are file contents.

---
permalink: /sitemap.xml
excludeFromSitemap: true
---


  {%- for item in collections.all %}
    {%- if item.data.excludeFromSitemap !== true %}
      
        https://localhost:8080{{ item.url }}
        {{ item.data.lastmod or item.date | formatDate('yyyy-MM-dd')  }}
        {%- if item.data.changefreq %}
          {{ item.data.changefreq }}
        {%- endif %}
        {%- if item.data.priority %}
          {{ item.data.priority }}
        {%- endif %}
      
    {%- endif %}
  {%- endfor %}

We are using the Nunjucks templating language to iterate through the static website pages collections array provided by 11ty.

And if posts do not have the excludeFromSitemap variable set  true we include them in to sitemap XML file. Relatively simple setup.

Add RSS feed

RSS feed is a way to provide an updated feed for your website to the people who want to subscribe and receive notifications about new content.

11ty provides a simple plugin that lets us dynamically generate such feed during build time.

First, you have to install the plugin and save it to your package.json while running this

npm install @11ty/eleventy-plugin-rss --save

Then upgrade eleventy.js with plugin configuration

// 11ty setup
module.exports = function(eleventyConfig) {

.....

    eleventyConfig.addPlugin(feedPlugin, {
		type: "atom", // or "rss", "json"
		outputPath: "/feed.xml",
		collection: {
			name: "blog", 
			limit: 10,    
		},
		metadata: {
			language: "en",
			title: "11ty static website",
			subtitle: "Minimal static 11ty website",
			base: "https://localhost:8080/",
			author: {
				name: "Popularowl",
				email: "", // Optional
			}
		}
	});
 .....

};

Your RSS feed should now be present as feed.xml

Summary

This 2 part tutorial covers the basics of using an 11ty static website generator to build blog-type websites. You can always visit the official 11ty documentation to get more detailed insights.

Full source code for the static website we created (together with some improvements) is present in the open GitHub repository. Give it a star if you find it useful.

Leave any questions/feedback in the comments section below.

The post Build static website with 11ty. Part 2 appeared first on Htmlcenter Blog.

They have several advantages. Consists of HTML files, which means they can be quickly deployed to web servers. Static websites are very scalable – have a small web server usage footprint, and do not require databases.

Summary

In this tutorial, we will build a static website using Markdown syntax for content and an Eleventy (11ty) static site generator to generate static HTML files.

Prerequisites: you will need Nodejs runtime installed on your dev machine to follow the steps in this tutorial. At the bottom of this page, we share the link to the full project source code on GitHub.

A static website will have 5 pages, a lean CSS design, tags, a dynamic sitemap and a dynamic RSS feed.

Initialize the project

Create a dedicated working directory go to it and run the below npm commands.

npm init -y
npm install @11ty/eleventy --save
npx @11ty/eleventy

output: [11ty] Wrote 0 files in 0.03 seconds (v3.0.0)

The first command creates a file package.json that serves as a descriptor/metadata file for our project.

The next line installs the 11ty npm package. The third command runs the Eleventy static site generator in the directory, to test.

You see that 11ty generated exactly 0 HTML files.

This is because we have no Markdown files or any other files available in a directory yet. Let’s create a page called about.md and add the following Markdown syntax code

# About

This is a lean static web site, powered by [11ty static site generator](https://www.11ty.dev/).

It's created as an example source code for tutorial.

## Useful links

- [Blog posts](/blog/)
- [About](/about/)

Now you can run 11ty again, and this Markdown file will be converted to an HTML file. By default, an HTML file will be created in _site directory.

npx @11ty/eleventy --serve

[11ty] Writing ./_site/about/index.html from ./about.md (liquid)
[11ty] Wrote 1 file in 0.11 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

Notice, this time we added --serve flag, which tells 11ty to not only generate static files but also start a local web server so we can test the newly generated static website.

Structure

Next, we will define the structure of our static website project.

Add a file called .eleventy.js to your directory. This is a configuration file for 11ty generator where we specify the structure of our project.

// 11ty setup
module.exports = function(eleventyConfig) {

    return {
        dir: {
            input: 'content',
            includes: '_includes',
            output: 'dist'
        },
        markdownTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        dataTemplateEngine: 'njk'
    };
};

In dir object, within this JSON file we define 3 directories: the input directory – where our website files should be located. Files in this directory will be converted by an 11ty generator.

The output directory defines where the generator will create HTML files.

And includes element defines the directory for files that we use for creating web page layouts.

The last 3 elements instruct 11ty to use njk or Nunjucks to be used as a templating language.

As we configured 11ty to look for source files in a content directory – therefore we need to create this directory in the project. Move the about.md file we created earlier to this dir.

Next, we create index.md which will be our home page. Then we create blog-post-a.md, blog-post-b.md, blog-post-c.md pages to represent blog posts. Add any example Markdown text in them – this can change it later.

You can use this random Markdown text generator to create some example content.

Your directory structure should now look like this

/
└── 11ty-static-website
    ├── content
    │   ├── about.md
    │   ├── index.md
    │   └── blog
    │       ├── blog-post-a.md
    │       ├── blog-post-b.md
    │       └── blog-post-c.md
    ├── .eleventy.js
    └── package.json

Run the same 11ty build command as before and you should see the below results

npx @11ty/eleventy --serve
[11ty] Writing ./dist/about/index.html from ./content/about.md (njk)
[11ty] Writing ./dist/index.html from ./content/index.md (njk)
[11ty] Writing ./dist/blog/blog-post-a/index.html from ./content/blog/blog-post-a.md (njk)
[11ty] Writing ./dist/blog/blog-post-b/index.html from ./content/blog/blog-post-b.md (njk)
[11ty] Writing ./dist/blog/blog-post-c/index.html from ./content/blog/blog-post-c.md (njk)
[11ty] Wrote 5 files in 0.17 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

Includes

11ty site generator allows us to create templates of website pages.

The concept of layouts lets one webpage include other web pages as layouts. We are going to create a header, footer, and base layout for our site.

Create the _includes a directory within the contents folder. In this directory create a file called base.njk with the following template.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <!-- charset / viewport -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ title }}</title>
        <meta name="description" content="{{ description }}">
        <link rel="canonical" href="{{ page.url }}">

    </head>
    <body>
       <!-- content -->
       <main id="content">{{ content | safe }}</main>
    </body>
</html>

Every web page that references this template will be wrapped with this layout. A template is created in Nunjucks templating syntax – remember earlier we added this in 11ty configuration.

The items within {{}} are Nunjucks variables.

We are going to create them within the actual Markdown pages. Some variables as  {{ page.url }} are provided to us by 11ty itself.

Now we have to reference this template. Open index.md file and add the following very top of the Markdown page

---
layout: base.njk
title: Minimal static 11ty website
description: Minimal static 11ty website which serves as skeleton project for larger web projects
---

Notice the layout value, as well as the title and description variables.

Now if you run the 11ty generator again and check the index HTML pages generated – you will have HTML markup from the template in index page. But not in others.

Next Steps

At this stage, we have our project structured and all content pages created. With simple templating.

But we still need to add CSS styling to web pages. And add some dynamically generated files like sitemap.

In the next part of the tutorial, we will cover CSS styles, more advanced templating, dynamically generated sitemap, and RSS feed.

You can find the full source code for the finished 11ty static website project on GitHub.

The post How to build static website with 11ty appeared first on Htmlcenter Blog.

The language in which all websites and web apps are being presented on the web browsers is HTML.

This markup language is what web browsers read, understand, and render. In addition to HTML, web applications in most cases have dedicated JavaScript code and style files.

Many websites are dynamic with HTML and corresponding assets generated dynamically, by the web server backend application.

Recently, static websites started to gain popularity.

A static website means that all HTML and Javascript required by web browsers are statically generated on the server side and will not change.

This brings many benefits for website performance – most of the content can be cached and can be loaded by the browser very fast.

Such pages do not change, you don’t need the backed server at all. Hence the name – static websites.

Because of this nature, static websites can be served from multiple platforms which allows content sharing. Examples would be GitHub pages or even DropBox.

Generating static HTML websites

What are the most common ways of generating static HTML websites?

You can, of course, create and maintain your static website pages in HTML language as a set of files.

However, being a markup language, HTML is hard to read for humans.

Markdown language comes to the rescue. Markdown is easy to read for humans and a large array of tools exists to convert markdown to HTML markup.

Static site generators work this way – they use such converters, plus provide some extra bits for generating structure for static websites.

In this tutorial, we are going to use one of such static site generators – Metalsmith. You will learn how to set up and configure a simple static website.

MobileGap – the list of open-source mobile applications

MobileGap is a simple website we have created to maintain the list of open-source mobile application projects.

The first version of  mobilegap.net site was quickly put together by using an existing WordPress template we had lying around.

But, as the number of developers asking to add their open-source applications to the list grew, we decided to open-source the content creation of this website.

The good option for such a setup was to maintain website content in a Markdown language, generate HTML markup from it, and move generated HTML files to be served by the web server. Markdown pages should be hosted on a publically accessible repository like GitHub.

Now, everyone wishing to add their application to the list only has to issue a GitHub pull request to MobileGap GitHub project to update the pages.

How did we set it up?

Maintain static HTML websites with Markdown and Metalsmith

We are using metalsmith.io simple static site generator to convert Markdown pages to HTML markup.

Now let’s reference the current project structure of mobilegap.net source code

Metalsmith is a NodeJS module and requires NodeJS to be installed on the system. Let’s go through the files in the project.

package.json is a packaging file for Node applications. It has a list of dependencies which the application relies on in the dependencies section. The contents of the file are the following:

{
 "name": "www.mobilegap.net",
 "version": "0.1.0",
 "description": "MobileGap - open source mobile application directory",
 "main": "index.js",
 "repository": { 
 "type" : "git",
 "url" : "https://github.com/sauliuz/mobilegap.net.git"
},
 "dependencies": {
 "handlebars": "^4.0.5",
 "metalsmith": "^2.1.0",
 "metalsmith-markdown": "^0.2.1",
 "metalsmith-templates": "^0.7.0"
},
 "author": "popularowl.com",
 "license": "MIT"
}

The dependencies section lists a few npm packages our project relies on. Metalsmith core is simplistic and minimal, and to use Markdown or templating functionality, we have to list these specific Metalsmith modules. There is also a handlebars module, which helps to set up templates.

Other sections of the file provide information about the project. If you want to understand the structure of a packaging file for NodeJS projects, check the official documentation.

Run npm install on your system and the npm package manager (it comes together with NodeJS installation) will download all the project dependencies.

Now let’s look at index.js

var Metalsmith = require('metalsmith'),
 markdown = require('metalsmith-markdown'),
 templates = require('metalsmith-templates'),
 Handlebars = require('handlebars'),
 fs = require('fs');

 Handlebars.registerPartial('header', fs.readFileSync(__dirname + '/templates/partials/header.hbt').toString());
 Handlebars.registerPartial('footer', fs.readFileSync(__dirname + '/templates/partials/footer.hbt').toString());

Metalsmith(__dirname)
 .use(markdown())
 .use(templates('handlebars'))
 .source('./markdown')
 .destination('./mobilegap.net')
 .build(function (err) { if(err) console.log(err) })

If you are familiar with NodeJS applications, this file doesn’t look very complex.

First, we retrieve all the required modules. Then we are registering partials for Handlebars templates. This allows us to keep a shared header and footer for all pages.

Next, we set Metalsmith static site generator, with Metalsmith(..) providing it with the location to a current directory.

We use Handlebars templates, the markdown directory as a source, and the mobilegap.net directory as a destination for generated HTML files.

The last step is build(). We are catching and logging any errors that might happen during the build process.

As you might have already guessed, Markdown files are located in markdown a directory, template files are located in templates. We like simplicity.

Now, if you run node index.js all the markdown files from the markdown directory will be converted to HTML using the template and partials from the templates directory.

The resulting HTML files are created in the mobilegap.net directory. Metalsmith will delete the old HTML files before creating new ones by default.

Metalsmith will also copy all other files (styles, JavaScript) from a source directory to a destination directory as they are.

What’s left is to move generated HTML files to your web server. In the next part of this post, I’ll describe the process we use to employ a simple CI pipeline to automate the generation of static HTML websites after new code changes are merged into the GitHub repository.

The post Static HTML sites with Markdown and Metalsmith appeared first on Htmlcenter Blog.

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 httpbin.org web service in order to retrieve users IP address before proceeding with login. httpbin.org 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.

 Displaying Users IP Address

The example http communication piece captures and displays application user IP address on the Angular Starter login page. Such functionality is quite common in financial web apps and apps requiring increased security. In our case, it’s just an example of communication with external web service.

First we have to add $httpProvider as a dependency to Angular.js application. Also, a couple of new configuration settings for all http requests our application will be making. All this is being configured in app.js

mostPopularListingsApp.config(function($routeProvider, $locationProvider, $httpProvider) {
  ...
  // Settings for http communications
  $httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
  ...
});

As we now added $httpProvider to Angular Starter app configuration, what’s left is to use $http object in the LoginController.js

function loadUserIp(){
  $http.get('http://httpbin.org/ip').
    then(function(response) {
    // this callback will be called asynchronously
    // when the response is available
    userIp = response.data.origin;
    console.log(userIp);
  
    // assigning userIp to scope
    return $scope.userip = userIp;
    ...
}

    // Introducing delay 500 ms
    var filterTextTimeout = $timeout(function() {
      loadUserIp();            
    }, 500); 

Notice the 500ms delay we are introducing before assigning the $scope.userip value? It takes some time for http response to come back from web service. The result is following:

Clone the new version of Angular Starter app from GitHub and try running the project yourself.

Launching and Testing Angular Starter

Based on the reader feedback we got, the final section of this post will list main commands used for launching Angular Starter project in local dev environment and running the unit tests for its code. You have to clone the project on your dev environment first:

git clone https://github.com/popularowl/angular-starter.git

Angular Starter comes with few inbuilt npm commands.

npm start (will start the local web server on localhost:8000 and will serve app directory)
npm test (will start karma for continuous testing once code changes are detected)
npm test-single-run (will start karma for one single test run)

Check out all the available npm commands in package.json.

All the feedback and improvement suggestions for Angular Starter are very welcome. Use the comment section below or create the issue on the GitHub project page. Thanks!

The post How AngularJS communicates with web services appeared first on Htmlcenter Blog.

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.

Here are the resources you should look into:

Official customizer for Bootstrap

The official Bootstrap customizable download. This is the first place to go if you want to customize your Bootstrap installation. The interesting thing about how it works is that instead of giving you a settings file of some kind, you actually get to customize the framework prior to downloading and installing it.

Just some of the things you can adjust: common CSS styles, Bootstrap components, JS components, jQuery plugins in use, default colors, global styles, individual elements of every CSS class, margins, padding settings, and many many more.

Once you’re done, just click the Compile and Download button and get your own version of Bootstrap.

Customizing/extending Bootstrap CSS

StyleBootstrap. Great tool for editing the default UI elements of Bootstrap. Compared to the official customization tool, this one delivers some helpers in the form of color pickers that should make the customization faster for you. When you’re done adjusting your custom styles, you can download the final CSS file and add it to your existing Bootstrap installation.

Bootstrap Magic. Another customization tool for the Bootstrap CSS. This one is a bit more advanced and delivers some cool helpers for faster usage. For example, it gives you autocomplete for LESS variables and functions, you get contextual and live preview of the changes you’re making, you can import and create variables, and there’s also a color picker. You can export your custom CSS when you’re done adjusting it.

BootSwatchr. This CSS editor for Bootstrap is more code-based in a sense that you can customize your version of the framework by adjusting the actual CSS code. However, you get to see a preview of your actions on the right side of the screen at all times (provides you with immediate feedback). Additionally, there’s a gallery of ready-made modifications, which you can use too.

Bootstrap Live Customizer. Similar to BootSwatchr, but more geared towards developers who prefer to use a UI instead of doing everything in the source code. This customizer allows you to adjust any element of the Bootstrap stylesheet and do so through an easy-to-grasp interface.

New fonts

Font Awesome. It is perhaps the most popular icon font of them all. The Bootstrap version gives you 360+ icons that you can use on your site. Since it is a font, all the icons are in vector formats and will look great on any device and at any scale.

Adjusting the UI

Flat UI by Designmodo. Great package by the guys over at Designmodo. It includes all the basic graphical elements of the framework, such as buttons, input fields, checkboxes, typography settings, icons, color swatches, and many more. Everything available for free. And like the name suggests, it’s a “flat design” take on the Bootstrap framework.

Fbootstrapp. A very interesting package designed to make Facebook app development easier. It mimics the design of Facebook, including all the basic elements such as buttons, forms, grids, and more. Great for any developer building something for Facebook.

Bootstrap plugins and snippets

• Bootsnipp. It’s an element gallery for Bootstrap. You’ll find a lot of short and sweet snippets there that provide quick fixes and modifications to the Bootstrap framework. For instance, you can find snippets for custom checkboxes, login and registration forms, profile picture styling, pricing tables, and much more.
• Bootstrap Calendar. A full calendar plugin that allows you to display months, years, weeks, and the events assigned to them.
• Bootstrap Prompts. Alerts for Bootstrap that display modal windows instead of using browser alerts.
• Bootstrap Image Gallery. A touch-enabled, responsive and customizable image and video gallery.
• Bootstrap Modal Carousel. A set of JS and CSS extensions that allow you to display a carousel in Bootstrap.
• Bootstrap Media Lightbox. A lightweight and borderless media lightbox extension for Bootstrap.
• Social Buttons for Bootstrap. A set of great looking social media buttons for Bootstrap based on Font Awesome.
• Yamm! A great mega-menu for Bootstrap. It utilizes the default navbar markup and grid system.
• Bootstrap Sidebar. A responsive sidebar plugin. Helpful if your menus are too big to fit into a horizontal menubar.
• BootstrapTreeNav. A plugin that makes it possible to create tree-style navigation in Bootstrap.
• jqBootstrapValidation. A great jQuery form validation plugin for Bootstrap.
• Bootstrap Tabcollapse. Adjusts the Bootstrap tabs component for smaller screens by making it collapsible.
• Tokenfield for Bootstrap. A great tagging plugin for Bootstrap that uses jQuery. Big focus on keyboard support.
• ClockPicker. A nice clock-style time-picker for Bootstrap.
• Accordian Wizard. An accordion-based wizard implementation for Bootstrap.
• Bootstrap Confirmation. A very nice plugin that replaces the default confirmation dialogs with pop-overs.
• Bootstrap Star Rating. A cool star rating plugin based on jQuery. Supports fractional star fill and RTL input.

Books

Extending Bootstrap by Christoffer Niska. Published by PACKT Publishing, this book is geared towards intermediate developers who want to extend Bootstrap through themes and plugins (already existing ones and their own).

Modifying the grid

Shoelace. Visual Bootstrap grid builder. Instead of experimenting with HTML, build your site’s Bootstrap grid through an easy-to-use UI.

LayoutIt. Another Bootstrap layout builder. But this time, apart from the grid adjustments, you can also add basic site elements such as titles, paragraphs, navigation, forms, tables, images, and everything else that’s part of Bootstrap’s structure.

That’s about it for our set of Bootstrap goodies and extensions, so now it’s your turn to chip in! Do you know of any other Bootstrap resource that would look good on this list?

The post How to Customize Bootstrap – The Resources You Are Looking For appeared first on Htmlcenter Blog.

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.

Starting with PhoneGap

The best way to start PhoneGap project is to use its command line interface (also called Cordova CLI). Its a little handy tool which is used from the command line with many pre-built Cordova helper methods.

Cordova CLI requires Node.js to be installed on your machine as its using Node package manager (npm) for installation. Once you have Node.js installed on your development machine here is the command to install Cordova CLI globally (MacOSX)

$: sudo npm install -g cordova

After install is completed successfully, you should be able to run cordova command to invoke CLI from the terminal. For example, this should work

$: cordova help

Synopsis
    cordova command [options]

Global Commands
    create ................... Create a project
    help ..................... Get help for a command

Project Commands
    info ..................... Generate project information

    platform ................. Manage project platforms
    plugin ................... Manage project plugins

Now you have Cordova CLI installed and can use it to initialise new PhoneGap project. Here is the example

$: cordova create htmlcenterLogin com.htmlcenter.loginapp HTMLCenterHello

We are sending create command to the cordova utility together with the application directory name, unique id (reverse domain name serves as unique app id) and a title of the new application. All of these can later be changed in the project’s config.xml configuration file.

PhoneGap relies on mobile OS SDK’s being available on your development machine. This is a separate procedure to download and install them. You can find these on the mobile OS developer sites. I’m going to use iOS project as and example for this tutorial and this requires me to have Apple Xcode installed. Android SDK has its own requirements.

$: cordova platform add ios
$: cordova platforms ls
$: cordova build ios

First line adds Cordova iOS platform to the project (again by using Node’s npm). The second one shows what platforms are added to the project and which ones are available. Third line builds PhoneGap project for iOS platform.

What exactly did this command for adding platforms did? It has created new directory within your project platforms directory. It does it for each different mobile platform you add in order to maintain separate file sets.
Worth to note that you only have to maintain main code in www directory with your application code, Cordova CLI maintains the specific platform directories itself (copying files from main www directory etc.)

And what about cordova build ios? This command has copied files from your main www directory and builded .app file in order to be tested in iOS simulator (in my case its HTMLCenterHello.app). Usually, very first build run requires more compilation time but subsequent builds are much faster as Cordova is reusing already compiled components.

Your projects/ios directory now contain a fully working iOS native application project. Once I open it in XCode and run the emulator I can see a native iOs app which is running default PhoneGap mobile web application in it.

Adding Framework7 project to PhoneGap

In order for our Framewok7 application to become working native iOS app we just have to add it to www directory in PhoneGap project which we have created in tutorial parts one and two. It currently contains example index.html file with some CSS and JavaScript. This application is what you currently see running in your emulator.

While replacing existing html, css and js files we will maintain the example index.js file as it contains example code how to bind to events Cordova framework distributes to your app. Just copy the index.js file to you Framework7 project js directory and reference it in the index.html file. This is how I updated references in index.htm for our example project.

...
 <!-- Cordova index.js file with all Cordova bindings -->
 <script type="text/javascript" src="js/index.js"></script>
 <!-- Path to Framework7 Library JS-->
 <script type="text/javascript" src="js/framework7/framework7.min.js"></script>
 <!-- Path to your app js-->
 <script type="text/javascript" src="js/my-app.js"></script>
...

After copying all the files and adding index.js we launch the app from within XCode and our Framework7 application is now running within iOS simulator as native iOS application. It still has all the functionality we added in previous tutorials. Users can register and login, and their details are being saved and validated on Parse BaaS platform.

Conclusion

In this tutorial, we have created new PhoneGap project, generated iOS build and converted Framework7 based mobile web application to a native iOS app. The native app we have generated is very simple, but it already has navigation, transitions, secondary side views and HTTP communication (cloud APIs) enabled. Next natural steps for development would be to create application icon, add loading view and add more screen views.

We already mentioned that PhoneGap provides plugin functionality and there are many plugins out there for developers to use in order to leverage native mobile OS functionality via JavaScript. PhoneGap plugins are the best way to use native mobile OS APIs from within your JavaScript code. This Cordova plugin directory will get you started.

You can find a source code for the application we created during all 3 parts of this tutorial in PopularOwl Labs repository on GitHub. Any improvement suggestions are most certainly welcome. Let us know!

The post How Framework7 and PhoneGap fit together appeared first on Htmlcenter Blog.

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.

Starting with:

Official documentation

Getting started with Bootstrap. This is the first place you go for everything Bootstrap-related. While the official docs are not always written in the most beginner-friendly form, they surely are the most up-to-date, and they provide you with everything needed to make Bootstrap work. Make sure to look into:

• CSS in Bootstrap. A breakdown of everything that the Bootstrap stylesheet has to offer (an explanation of every class) and how to work with it effectively.
• Components in Bootstrap. A handy cheat-sheet listing every element that the default installation of Bootstrap comes with. Including glyphicons, drop-downs, buttons, input fields, navbars, labels, and much more.
• JavaScript in Bootstrap. A description of the JS libraries and classes delivered with Bootstrap, plus how to use them to bring Bootstrap’s components to life.

Customizable download package. A truly great section on the official site, rarely seen with other systems and frameworks. Here, you can customize your version of Bootstrap by enabling or disabling certain modules. You can even adjust things like the default typography settings, colors, margins, and much more. In short, customizing your version of Bootstrap prior to downloading and installing it is a much faster alternative to doing it afterward (on a live site).

Bootstrap SASS. It’s where you can download a version of Bootstrap ported to SASS.

Bootstrap step-by-step tutorials

Understanding Twitter Bootstrap 3. Brief tutorial by SitePoint.com taking you all the way from scratch to an operational Bootstrap website. It’s the shortest tutorial on this list as it’s presented in a single blog post. Skips a couple of steps, but still gives you a great overview on how to work with the platform.

Bootstrap Tutorial by Tutorial Republic. This tutorial is divided into two main parts – basic, and advanced. Each part features a number of lessons on individual aspects of Bootstrap. In them, you will learn things such as working with the grid, making sure that the result of your work is responsive, creating tables, lists, forms, and working with everything else on your way to Bootstrap mastery. That being said, the focus here is more on the individual elements of Bootstrap rather than teaching you how to build a complete site from start to finish.

Bootstrap 3 Tutorial by W3Schools. You can find a lot of great stuff at w3schools.com, so it’s no surprise that they have a whole section dedicated to Bootstrap as well. With this tutorial, you will learn how to work with Bootstrap both in terms of the general website structure, as well as its individual elements. There are 19 chapters as part of the tutorial, and each one comes with written descriptions and source code demos that you can test through an operational dev environment.

Online courses

Make a Website: Bootstrap. Great free course at CodeCademy.com that takes you by hand through the process of re-building Airbnb’s homepage with Bootstrap. The course uses a custom three-column interface that presents the current instructions (1st column), the source code editor (2nd column), and the preview section (3rd column). The whole process is nicely guided, so you can easily understand what’s going on under the hood.

Code a Responsive Website with Bootstrap. This is a Udemy course priced at €89 ($95). Out of all Udemy courses on Bootstrap, this one seems the most professional and with the videos having the highest production value. Apart from that, it’s been taken by nearly 2,500 students and has the overall rating of 4.7 based on 104 reviews. The course goes through the steps of hand-coding a responsive site using Bootstrap, and it consists of 28 lectures that add up to a total of four hours of video tutorials.

Blasting Off with Bootstrap. A course that’s part of the “HTML/CSS Path” at CodeSchool.com. The first module of the course is free and the rest can be accessed by buying the $29 / month membership (which gives you unlimited access to all courses at CodeSchool.com, by the way). The course is well-structured and it takes you all the way from basic understanding of how Bootstrap works to working with grids, to adjusting typography, to adding a bit of flare to your creations, to adding extra JavaScript components.

Individual elements of Bootstrap explained

First, let’s take a look at what W3Schools has to offer in this department:

• Grids in Bootstrap. Bootstrap’s grid system explained (along with examples and code demos).
• Basic CSS classes explained: typography, buttons, forms and form elements, helper classes, images, tables.
• Individual components explained: glyphicons, drop-downs, navs.

Understanding Bootstrap’s Grid System. An in-depth breakdown of what Bootstrap’s grid system is and how to work with it.

Bootstrap and WordPress

Bootstrap Basic. A simple WordPress theme for developers to build their own creations on top of. You can treat it as a starter theme, or just as a point of reference when you get stuck working on a custom build.

BootstrapWP. A detailed online course teaching how to build a complete WordPress theme with Bootstrap. It covers not only the basic steps required in order to build a theme, but also how to create custom post types, a theme options panel, and even updating your theme later down the road when new versions of the framework come out.

Bootstrap 3! Create a Responsive WordPress Theme Now! Another Udemy course (€87, ~$93). This one focuses exclusively on building your first WordPress theme on Bootstrap. There’s three hours of video content across 35 lectures. Everything is divided into a handful of sections that transition nicely from one to another. The course has the average rating of 4.9 (25 reviews) and it’s been taken by nearly 4,000 students.

Free Bootstrap themes

Start Bootstrap. A collection of Bootstrap themes and templates. There’s a lot of free and open source themes here, as well as some great premium products.

Bootstrap Zero. Said to be the largest open-source, free Bootstrap template collection. What’s great here is that apart from standard website templates, you’ll also find templates for dashboards, admin interfaces, and more.

Other Bootstrap tools and resources

Shoelace. A visual grid builder for Bootstrap. This nice drag-and-drop interface lets you construct a grid structure in no time. Then you can export the result of your work as HTML. Saves a lot of time during development.

Button builder. Very small yet handy button generator for Bootstrap. Just a couple of clicks and you have yourself a good-looking button.

Jetstrap. A drag-and-drop Bootstrap site builder. It provides a faster alternative to building a Bootstrap site by hand with source code. The plans start at $16 per month.

Resources at Bootsnipp. A massive roundup of various Bootstrap resources. Some of the things you’ll find inside: icon fonts, JavaScript extensions, forms, templates, prototyping tools, development resources, extensions, UI elements, and more.

There you have it, more than 32 Bootstrap resources for you to devour! Feel free to comment and let us know if there’s anything else that should be listed here. We’d be happy to update this post with your input.

The post Ultimate Collection of Resources for Developers Starting With Bootstrap appeared first on Htmlcenter Blog.

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?

Angular Starter structure

In the above print screen, you can see the initial structure of Angular Starter project. On the top level, we have app and tests directories plus all the project configuration files for Bower, Karma, Node (we will come to all these later in the post).

The app directory has components and resource subdirectories. Components hold all application related components like views and controllers.

Resources directory is for resources like JavaScript, CSS and all 3rd party components managed by Bower package manager. I have named directory bower to make it clear this is where Bower downloads all the external libraries our project depends on.

And that’s all the directories in the Angular Starter we app.

Angular Starter configuration files

At the project top level, we have several configuration files. Some of them I have already mentioned in the section above. Let’s go through them one by one. .bowerrc is a configuration file instructing Bower package manager how to behave. If you are not familiar with Bower
– its great package manager for external libraries and frameworks. It’s mostly used to manage front end framework dependencies. That’s how it’s being used in Angular Starter project as well.

Configuration file .bowerrc has simple instructions telling Bower to save all packages it downloads to specific directory in this project

{
  "directory": "app/resources/bower"
}

Another configuration file for Bower is .bower.json – it specifies what do we want Bower to download and manage for us.

Karma is a spectacular test runner for JavaScript. This is how its creators define this project.

It is very handy test runner and works well with Angular.js apps (maybe because it’s created by Angular.js dev team folks?). Karma starts the real web browser, loads all the specified files into this browser and runs the unit tests.

We are using Karma to run Jasmine test cases for us. karma.conf.js is the configuration file telling Karma test runner what to do. It’s quite self-explanatory

module.exports = function(config){
  config.set({

    basePath : './',

    files : [
      'app/resources/bower/angular/angular.js',
      'app/resources/bower/angular-mocks/angular-mocks.js',
      'app/resources/bower/angular-route/angular-route.js',
      'app/app.js',
      'app/components/home/*.js',
      'app/resources/js/*.js',
      'tests/*_test.js'
    ],

    autoWatch : true,
    frameworks: ['jasmine'],
    browsers : ['Chrome'],

    plugins : [
      'karma-chrome-launcher',
      'karma-jasmine',
      'karma-junit-reporter'
    ],

    junitReporter : {
      outputFile: 'tests/junit-reporter-log.xml',
      suite: 'unit'
    }

  });
};

Karma is instructed to load all necessary files, use Chrome browser for testing, and create test reports after all tests are performed. autoWatch tells Karma to keep watching for file changes and re-run all tests after developer saves the new code.

And the last configuration file is package.json with the instructions to Node to prepare and manage Angular Starter project for us.

Even though actual Angular Starter web app does not depend on Node.js being installed we use npm (Node package manager tool) to manage builds and testing for us. It also installs and manages required backend components (in the similar manner as Bower does for front-end components). We have set npm to also run project tasks for us.

npm start will launch simple HTTP server in Angular.js project directory and npm test will run all Jasmine unit tests with the help of Karma.

Angular Starter Components

An App components directory has both views and controllers which are being used in Angular Starter project. We decided to keep views and controllers separate in order for better maintainability if your Angular.js app project grows more complex.

The naming convention is important here and all controller file names should match the view name they are using. For example, AboutController.js should match aboutView.html

Application Tests

tests directory is where we keep all Angular Starter project unit tests. They have the suffix _test.js and that’s what Karma understands and runs. You will find that naming convention in the project is to use controller name as part of the test file name and keep test files separated for each controller. This again gives us better maintainability.

After tests are run with npm tests here is the output you’ll get. Notice how fast Karma runner is – all 12 tests are finished in 0.46 seconds.

INFO [karma]: Karma v0.10.10 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 41.0.2272 (Mac OS X 10.8.5)]: Connected on socket K8zKwK8wbP1-5_mWbc9q
Chrome 41.0.2272 (Mac OS X 10.8.5): Executed 12 of 12 SUCCESS (0.466 secs / 0.03 secs)

If you keep this terminal window open, all your files included in Karma config will be monitored for changes and once any changes are detected all the test cases will be re-run.

Conclusion

This post summarises the structure and configuration of Angular Starter open source project. In the follow-up article on HTMLCenter, I’m going to introduce you to some of the basic functionality you can find in Angular Starter, like communication to web services via Rest API’s.

Follow our blog or even better, subscribe to HTMLCenter Newsletter and we will deliver you a notification once 2nd part of this article is up.

Angular Starter source code can be found on GitHub.

All the feedback and improvement suggestions are very welcome. Use the comment section below or create the issue on the GitHub project page. Thanks!

The post Building Angular.js Starter application appeared first on Htmlcenter Blog.

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.

What I specifically like about Parse – it has great user management functionality in built and available out of the box. Client applications can register new users and then log them in with only 2 API requests.
First we are going to register new user. Parse is asking client applications to send Application Id and API key in the HTTP headers. This information you can retrieve from Parse API reference documentation page. It should have your credential details pre filled in example requests.

Username has to be unique in the User database and Parse has inbuilt validation for this (try to create another user with the same name and you will get “username already taken” error.

curl -X POST \
 -H "X-Parse-Application-Id: xxx" \
 -H "X-Parse-REST-API-Key: yyy" \
 -H "Content-Type: application/json" \
 -d '{"username":"htmlcenter","password":"superpassword","moreinfo":"its a great blog"}' https://api.parse.com/1/users

After our new user is successfully created some time latter our mobile application can make another request with user login data in order to login. Parse will handle username / password validation steps and will issue session token with user details if login was successful. In case login data is incorrect your application will receive appropriate response from Parse service.

curl -X GET \
 -H "X-Parse-Application-Id: xxx" \
 -H "X-Parse-REST-API-Key: yyy" \
 -G \
 --data-urlencode 'username=htmlcenter' \
 --data-urlencode 'password=superpassword' https://api.parse.com/1/login

As you can see all user management functionality is already provided for our mobile application by Parse without us doing much work. We do not have to store any user related data in mobile web app (not recommended for security reasons). Our client application will only have registration and login forms for app user to submit data. Here is how registered user data looks in Parse cloud service – via web UI.

Next step is to enable login and registration views.

Framework7 Http Requests

Framework7 doesn’t use any external 3rd party libraries. In their applications developers can use jQuery like syntax for accessing DOM and jQuery Ajax syntax to send / receive requests via HTTP.

In this tutorial part we continue using source code from where we left it the previous tutorial part. I have added another page called register by simply copying login page HTML code and renaming data-page attribute. This page has 3 fields we are going to be sending to Parse: username, password and email. In order to login, user will need only username and password but our application could retrieve users email anytime by requesting information from Parse.

We first have to create the method for Send button that once its clicked by application user our app sends HTTP request with registration data to Parse service. This is done in my-app.js JavaScript file:

// Function to handle Submit button on Register page
$$('#submmit-register').on('click', function () {
 
 var username = $$('#register-username').val();
 var email = $$('#register-email').val();
 var password = $$('#register-password').val();
 
 if (!username || !password || !email){
  myApp.alert('Please fill in all Registration form fields');
  return;
 }

 ...

});

This above peace of code captures values from registration form and assigns them to variables to be used in the HTTP request. Code also checks for these fields not to be empty and displays simple alert message if any one of them is missing data. Note the myApp.alert in the code –  it will display nice iOS7 like popup message.

Next block of code uses the username, email and password values we have captured and sends HTTP POST request to Parse backend in order to create new user. Request format is the same as curl one we have discussed before just has to be adjusted to jQuery Ajax like syntax

var query = 'https://api.parse.com/1/users';
var postdata = {};

postdata.username = username;
postdata.password = password;
postdata.email = email;
myApp.showIndicator();
$$.ajax({
 url: query,
 headers: {"X-Parse-Application-Id":applicationId,"X-Parse-REST-API-Key":restApiKey},
 type: "POST",
 contentType: "application/json",
 data: JSON.stringify(postdata),
 statusCode: {
  201: success201,
  400: notsuccess,
  500: notsuccess
 }
});

As you can see, we are setting query url, JSON object to be posted to Parse and initialising Framework7 spinner before making Ajax request.

I have externalised the deader values in the beginning of my-app.js JavaScript file so they can be used across multiple Ajax requests. We set HTTP request type to POST and add handle methods for HTTP response status codes. In our case HTTP 201 means successfully created user and any other HTTP code means request did not succeed.

Whats left is to add the methods to handle success and failed Parse responses:

var success201 = function(data, textStatus, jqXHR) {
 // We have received response and can hide activity indicator
 myApp.hideIndicator();
 // Will pass context with retrieved user name
 // to welcome page. Redirect to welcome page
 mainView.router.load({
 template: Template7.templates.welcomeTemplate,
  context: {
   name: username
  }
 });
};

var notsuccess = function(data, textStatus, jqXHR) {
 // We have received response and can hide activity indicator
 myApp.hideIndicator();
 myApp.alert('Login was unsuccessful, please try again');
};

In both cases we are dismissing spinner. In case user registration was successful we are loading up welcome page from Framework7 template. If registration for some reason was not successful, we are going display already familiar Framework7 popup message about unsuccessful registration.

Worth to mention that it would be possible to verify more details about why the registration request has failed as Parse actually sends informative response message. But we are going to do it in 3rd tutorial part.

The same approach I did for login page functionality. Only difference is the request is GET and we have no request body to send. As we are expecting HTTP 200 response as success response instead of using status codes to handle responses we can just use success / error:

$$.ajax({
   url: query,
   headers: {"X-Parse-Application-Id":applicationId,"X-Parse-REST-API-Key":restApiKey},
   type: "GET",
   // if successful response received (http 2xx)
   success: function(data, textStatus ){
 
     // We have received response and can hide activity indicator
     myApp.hideIndicator();
 
     data = JSON.parse(data);
     if (!data.username) {return}

     var username = data.username; 
 
    // Will pass context with retrieved user name 
    // to welcome page. Redirect to welcome page
    mainView.router.load({
     template: Template7.templates.welcomeTemplate,
     context: {
      name: username
     }
   });
  },
  error: function(xhr, textStatus, errorThrown){ 
    // We have received response and can hide activity indicator
    myApp.hideIndicator(); 
    myApp.alert('Login was unsuccessful, please verify username and password and try again');

    $$('#login-email').val('');
    $$('#login-password').val('');
  }
});

Conclusion

Adding HTTP communication to Framework7 is not hard if you are familiar with jQuery type Ajax request syntax and JavaScript async nature of coding (all the callback fun). In this tutorial we have added such communication with Parse backend service for registering / user login. You can find all the related project source code on GitHub.

In the final 3rd part of the tutorial we are going to wrap up this application to PhoneGap framework which will make it a native mobile app. Stay tuned for the last tutorial part.

The post Framework7 and Parse for User login appeared first on Htmlcenter Blog.