HTML - Developing Tips

   
   
 browser  
 frontend  
Article Series

HTML Basic Related Articles.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: A few good tips while developing HTML.

Simple Web Server

This below only server static html files along with static assets.

BrowserSync

Before I close this article there is one trick that I want to share. I found a good tools to show your directory in browser. It is called browsersync, you can install it using npm.

$ browser-sync start --server --directory

The looks of browsersync is as figure below.

HTML Basic: Browsersync Root

Now you can load your page directly from web browser, instead of launch the page from file manager. Minimize switching, therefore more efficiency.

HTML Basic: Browsersync Assets

You can also walk through assets directory. And see the stylesheet directly in browser, and also have a look at javascript in browser.

Python Simple HTTP Server

Another result can be done using python3 as below:

$ python -m http.server

HTML Basic: Python Simple HTTP Server

But it does not play well with LiveJS.

PHP Simple HTTP Server

How about PHP?

$ php -S localhost:8000

HTML Basic: Python Simple HTTP Server

This does not play well with LiveJS either.

Ruby Webrick

How about Ruby? Webrick is HTTP server toolkit.

$ ruby -run -e httpd -- -p 5000

HTML Basic: ruby Webrick: HTTP server Toolkit

This does not play well with LiveJS either.

Live JS

Have you ever get tired to refresh every time? With LiveJS, the browser will automatically refresh, whenever change occured on your document. So you do not need to refresh manually, everytime you save your .html file.

<head>
  <title>One Simple Example Page</title>
  <link rel="stylesheet" href="02-assets/style.css">
  <script src="02-assets/script.js"></script>
   <script src="live.js">
</head>

Live.js doesn’t support the file protocol. It needs http.

What’s Next?

Consider continue reading [ HTML - Inspect Element ].