Web Technologies

Continuous Integration (CI) for Gitbook using Gitlab and Gulp

Gitbook is a static site generator, that converts a collection of Markdown files into a HTML Site. Alternatively it can also convert the markdown files into a PDF or ebook.
If you are not writing a book, it is also a great tool to create a quick documentation for a project you are working on.

Initial set up

We will need gitbook. Gitbook does not automatically generate a SUMMARY.md file, however there is an existing gitbook-summary tool to take care of that.

Gulp will be our taskrunner.

I will deploy to my server via FTP. Since you are only serving HTML Files, there is usually no need for server restart etc.
To integreate it into Gulp I will be using vinyl-ftp.

Gulp

Create a file called gulpfile.js and define your gulp tasks.

You should test especially the “deploy” task locally if everything is working correctly.

Gitlab CI Integration

You need to create a YAML File called .gitlab-ci.yml. Gitlab will recognise the file and run the commands in it.

That’s it. If you push something into the master branch, it will automatically run the commands in the yaml file and deploy your static website to your server.
When the build completes, you will recieve an email, telling you if everything went as planned.

Posted by happyneal in Blog, Web Technologies, 0 comments
Getting Started using AngularJS with Yeoman and Visual Studio Code

Getting Started using AngularJS with Yeoman and Visual Studio Code

Typically to get started with a web-project you would start downloading libraries, configuring grunt etc. Yeoman is a project that takes care of all of this in a simple step and goes one step beyond, it also ensures that you will be using current web-standards. My editor of choice is Visual Studio Code (Other alternatives would be Atom, Sublime, Brackets etc.).

I will be using Windows as my Operating system, all Software is available cross-platform for Mac and Linux. Some commands need to be adjusted for the platform you are using.

Software needed:

Now it may seem odd that python and git is listed here. However while I was trying to get yeoman to work I discovered that bower requires git to be added to the path and since python was missing from my path, some odd errors occurred while creating the initial project.

Getting Started with Yeoman

Working with Yeoman requires you to work with the terminal.

Open Powershell (Powershell is the newer version of the console and emulates more a linuxlike shell) by searching for “Windows Powershell” in the StartMenu

  1. Install a lot of node stuff you need for yeoman
    npm install -g yo bower grunt-cli gulp
  2. Now you need to install the yeoman generator for angularjs
    npm install -g generator-angular

Your first Yeoman project

Simply because you are anyway in the console change the directory to your project directory (something like cd c:/projects)

You can create a new directory using the mkdir-command like:

mkdir angularProject

Finally run

yo angular

to create your project.

You have to answer a couple of questions which (modern) tools&frameworks you would like to use:

Sass (with Compass): Yes

Bootstrap: Yes

Bootstrap Sass Version: Yes

More information about the official yeoman generator-angular can be found here.

If everything goes smoothly the generator-angular created for you an entire modern webapplication project that uses angularjs.

The generated Gruntfile

Grunt is a taskrunner, when properly defined it can automate a lot of tedious work. Yeoman essentially does the work of properly defining the gruntfile.

A lot of tasks are to optimize your various files, like css, js and image files. It also takes care of running the preprocessors like sass or less.

It even runs your javascript tests with karma.js. (and now that grunt takes care of most of your repetitive tasks you maybe even have time to write some tests).

What do you need to know?

There are three commands you can use on the console:

  • “grunt” – simply runs all the tasks and provides a working webapp in the “dist” folder
  • “grunt serve” – starts a webserver and automatically updates your browser while you are working on the source files
  • “grunt test” – runs all of your tests

 Visual Studio Code Setup

Well there is not much to do. You need to open the folder of your project.

And out of the Box you can already run the build and test tasks.

To additionally run the “serve” task in Code

  1. Ctrl-Shift-P > Configure Task Runner
  2. In the tasks.json add a new task
     {"taskName": "serve", "isWatching": true } 

 To use the Visual Studio Code Debugger you need to adjust the Debug Configuration

  1. Ctrl-Shift-P > Debug: Configure
  2. Change the line “program” : “app.js” into “program”: “app/scripts/app.js”.

Conclusion

The power of this setup is mostly that most of the stuff comes out of the box, and provides you with a great foundation to create a high quality code project.

You can and should extend the gruntfile to suit your specific needs like to push your project onto your webserver.

Posted by happyneal in Web Technologies, 3 comments
Forcing IE 10 to render pages as IE 10

Forcing IE 10 to render pages as IE 10

Web Design designed by Simple Icons from the thenounproject.com

Now isn’t that a silly title, sadly it’s one of those things I never thought I would have to deal with. Especially as Internet Explorers market-share is down to 8.8% in June. And seriously people switch to something that supports most of the web standard.

As a matter of fact Internet Explorer 10 defaults to render Webpages with its built in Compatibility Mode (IE 7) when displaying Intranet Websites.

Basically the thinking behind it is, we have an Advanced Browser (mostly) capable of rendering HTML5 Websites, but our Corporate Partners are so backwards that they are still running age-old Websites that possibly could be displayed incorrectly. In matter of fact they call this stupid Feature “Smart Defaults“.

Now as a HTML5 developer you would think, well yeah whatever I’ll just add a meta-tag to the <head></head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Well IE 10 looks at it and says “That can’t be right, I am in the intranet, and we don’t have cool HTML 5 sites here! I better render this in compatibility mode!!!”

So the only way to force Internet Explorer to do the right thing is to actually modify the settings of your webserver to add the exact same meta information to the HTTP Response object; Only then IE 10 will say, ok fine ill render it with my weird IE 10 render engine.

You can verify this using the Chrome Developer Tools

  1. Open Chrome, Press F12 to view the Development Tools
  2. Switch to the tab ‘Network’
  3. Navigate to the specific Page
  4. Verify that in the Get Request, the response Header “X-UA-Compatible: IE=10” or “IE=edge”Chrome-IE10-Header
Posted by happyneal in Web Technologies, 0 comments
Google App Engine: Import CSV to Datastore

Google App Engine: Import CSV to Datastore

Processing CSV Data with the Google App Engine is a two step process.
First you need to upload the data and store it in the blobstore.
Then you retrieve the file and process the information and save it to the Datastore(Database).
You can process the csv data with the standard python tools from the csv module, however instead of parsing a file you must parse a BlobReader.

Posted by happyneal in Python, Web Technologies, 6 comments
WordPress: (Part 3) Plugins

WordPress: (Part 3) Plugins

In this last part, i will give a short overview of WordPress Plugins and some General tips.

Plugins

WordPress has the possibility to be extended with several Plugins to enhance the experience.

Default Plugins

Hello Dolly!

This is a Plugin to simply delete and make you comfortable installing and removing Plugins

Akismet

Is an important plugin that prevents people spamming on your posts & pages. You have to register to fully use the plugin (free)

My Recommended Plugins:

Jetpack by WordPress.com

Jetpack is a collection of tools that are installed by default on wordpress.com. It adds basic functionality like statistics, as well as social network features, latex integration, advanced galleries etc.

Plugin Site: http://wordpress.org/extend/plugins/jetpack/

Link Indication by Michael Wöhrer

Adds small icons at the end of links to indicate the type of file.

Plugin site: http://sw-guide.de/wordpress/plugins/link-indication-plugin/

SyntaxHighlighter Evolved by Viper007Bond

Adds the possibility to display source code in WordPress

Plugin site: http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

wp-jquery-lightbox by Ulf Benjaminsson

Adds a neat box when displaying a single image

Plugin site: http://wordpress.org/extend/plugins/wp-jquery-lightbox/

General Tips

About Page

Create and maintain your about page, it is one of the most commonly visited sites on a blog.

Updates

When logging into WordPress admin area it always notifies you if new security patches are out for WordPress. Always check first if your theme and plugins work with that new version, then make a backup and then update WordPress.

Google Stuff

Google provides many different tools for WordPress. However for everything there are also alternatives (well search google you’ll find something)

Feedburner

This allows your RSS feed to be handled by google and in essence you could change the location of your blog and all subscribers to your blog automatically get the feed from your new location. In addition it provides Statistics how many people are subscribed to your blog.

http://feedburner.google.com

Analytics

This is one of the more creepy plugins from google, in essence it keeps track how much time people spent visiting your site, what they click, where they are from, what kind of computer they use etc.

http://www.google.com/analytics/

Adsense

Well Adsense is one way to make money with your blog, in essence it is a banner controlled by google and whenever somebody clicks the ad you get some money like 5cents. Well you get a check when you should get 70bucks, so it could take some time.

https://www.google.com/adsense/

Personal reasons

It is always best to have your own personal reasons why you maintain a website or a blog. But always keep in mind that the site is there to enrich the internet in some way.

Be mindful that you always will receive negative comments on the internet, you can ignore them, however if they are constructive you should at least listen.

And as always remember to have fun.

Part 1 – Part 2

Posted by happyneal in Web Technologies, 2 comments
WordPress: (Part 2) Themes and Menus

WordPress: (Part 2) Themes and Menus

Now that the site is installed and configured you can take care of choosing a theme and configuring the menus. (See Part 1)

Themes

There are many free themes available, as well as themes that come as a price. Finally there is the possibility of hiring a professional WordPress Theme Designer to customize your site.

Themes

Search for new themes with WordPress

To find themes you can navigate to Appearances and then on the top “Install Themes” and then start searching for themes.If you download or purchase a theme from another site, you also have to go to Appearances > Install Themes, and then choose on the top “Upload

Custom Themes

Upload a custom theme

A selection of themes can be found at smashing magazine: http://wp.smashingmagazine.com/2008/01/08/100-excellent-free-high-quality-wordpress-themes/

Menus 

After you have selected and installed your theme you usually define a menu for your site. In most cases you would want the user to be able to browse categories. However you also can let the site navigate to Pages or custom URLs.

To allow the user to browse categories you first have to define categories, this is found under Posts > Categories.  Whenever you create a new Post you should set a Category, if not it will be stored in the Category “Uncategorized“.

Here you set up your Categories

Here you set up your Categories

After you have set up the categories you can add them to your Menu. Important: You can set up multiple Menus, however one menu is always set to the “Primary Navigation”.

There is a Save Menu Button and a Save Primary Navigation Button

There is a Save Menu Button and a Save Primary Navigation Button

Watch out that you always use the “Save Menu” button to save any changes.

Widgets

Depending on your theme, it supports Widgets (small feature extensions). To add Widgets to your site, drag  a widget from available Widgets and drop it where you want it (e.g. The Main Sidebar)

After you have dragged it you can configure it and how it looks.

Additional Widgets are available when installing Plugins see Part 3

Widgets, simply drag and drop widgets

Widgets, simply drag and drop widgets

Continue to Part 3

Posted by happyneal in Web Technologies, 2 comments