Web Technologies

HTML 5: When to use <a> or <button>

tl:dr

  • <a> is used for page navigation
  • <button> is used for actions on the page
  • <input type="button" /> is used in a form and the value is used in the form

The Problem

Lets take a look at this small piece of code:

Now half of the people I showed this piece of code, said: well there is nothing wrong with the code.
That is a perfectly fine way of defining a button.

If you take a closer look, you will discover a couple of smaller issues with this piece of code.

First you would notice that hovering over the button you get a text cursor instead of an ‘hand’-cursor.
This is caused by leaving the attribute “href” undefined, you can fix it via defining something like ‘#’ or via CSS.

Then you would notice that by defining the “href” tag you would cause the browser to navigate to another page or the top of the page.
To prevent this you would then need to add some Javascript code and call ‘event.preventDefault()’, or add to your previous hack and define the href as ‘#0’. This solves the problem by relying on the browser not knowing what to do with illegal element ids (ids can never start with a number).

Voila, you are now in the situation that you are using some hack pattern that degrades the readability of your code.
Someone may come along and assume that someone made a mistake defining the href attribute /or used a placeholder and forgot to replace it.

The Solution

Now let’s improve the readability of the code:

We are now using the correct tag <button>, no need for any hacks to fix the cursor or some wierd href, and no additional line of Javascript.
You will need CSS to ensure that the button looks the same in all Browsers, however you would probably anyway used CSS to style your <a>-button.

But what about IE8? – for that we set the type=’button’, and IE8 is almost of no concern anymore (even for big corporate customers)

<button> vs <input type="button" />

Both types of buttons work in practice the same way.
However the Button element allows you to add content elements, like an image.
And usually you would use the <input> tag in a <form>.

As we are not working with a form and just want to have a button to execute some JS-Code I would use the Button tag.

Summary

  • <a> is used for page navigation
  • <button type='button'> is used for actions on the page, can contain other html elements
  • <input type="button" /> is used in a form

Some More Reading

Posted by happyneal in Web Technologies, 0 comments
JSP: Passing Variable Data to JavaScript

JSP: Passing Variable Data to JavaScript

When you try to marry old JSP Technology with the modern wonders of Typescript/ES6.
You will want to expose some data provided by the backend into the Javascript.

If you have the possibility you would use a fetch() call to receive JSON.
Sometimes, it is not possible to do a big rewrite of the jsp to fix a minor bug.
Here is a very dirty way to pass data from the JSP into the JS code. This code will utilise the HTML5 data-attribute.
Learn more about it here

JSP File:

JavaScript:

JQuery:

This is a very elegant solution, now you can run ESLint on your Javascript Code and will not have any unresolved variables.

Posted by happyneal in Java, Programming, Web Technologies, 0 comments

Udacity – Web Tooling and Automatisation

I recently took a look at the course materials for Web Tooling and Automatisation.

Overall the course is very well structured and introduces Gulp and a couple of common packages used in webdevelopment. Besides their main topic, they cover topics on good engineering practices, like linting and testing to ensure code quality.

While working on the project I ran into several little smaller things that were quite annoying. Thankfully the gulp community is quite big, so somebody already solved some of the issues I was facing.

Passing an “--production” flag

When developing, you will probably create a version of your software that is suited for easily finding bugs and errors and an optimized version that is minified and optimized for optimal performance for the end user.

You would define two different tasks in gulp, one “default” and one “production” task. This however would in turn cause you to have to duplicate your code – with optimization and without.

I found the package “gulp-if” that allows you to control if a function like compression is active during the task.
The remaining issue was to actually set the parameter before the tasks run. (All tasks in gulp run in parallel).

To get a flag from the command line, you can use the process.argv Array. However you must add “–” before your flag name. If not gulp will assume it is another task name that should run.

In the end you would use something like this:

Note: In Gulp 4, you can use a sequencer and would not need to pass in the flag by command-line, but you would define a task that will run before all the other tasks.

Dealing with Asset sources and destinations

When using gulp.src() and gulp.dest(), typically people use strings to define the locations. However this is quite annoying if you want to get a quick overview which locations are used. For a better maintainability you should create a small variable block that defines these strings. In the long run it lets you be more flexible where your files are etc.

End Result

At the end of the course I ended up with this gulpfile.js. It adds support for Typescript, Pug(Jade), google-closure-compiler.

The common gulp tasks to run are:
* gulp serve: Uses browser-sync with css injection for live-editing
* gulp --production: Creates an optimized build

Next steps:
Depending on your webserver, you would want to add a gulp deploy task.

gulpfile.js

Package.json

Posted by happyneal in Web Technologies, 0 comments

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