Make browser a basic html editor

While working on one of my recent blogs, I stumbled upon an HTML DOM property that looked interesting.

In past,

  • I have to see how the text change looks in a webpage – make change, refresh page or run the application again
  • I have to inspect, find the related DOM to make any text change to it and then write code to make the change to see it
  • I downloaded HTML page and then made some change in its text to add/edit/remove some comments for clean print.
  • Have some logic to provide an editable HTML page to users

Well, no more. Seems we have a new property (surely it was not there few years back but introduced recently): document.designMode

I tried in Firefox, from menu items, go to: Tools -> Web Developer -> Web Console. Write:

document.designMode = "on"

Post this, you can edit the webpage text right in your browser!

documentModeEx

Sample real use case could be providing a portion of page editable to users. Add that in an iframe and then turn the designMode of that to ‘on’:

iframeNode.contentDocument.designMode = "on";

A string indicating whether designMode is (or should be) set to on or off. Valid values are on and off

In IE, it would be under Developer Tools, and so on for other browsers.

design-mode
Browser Compatibility

Nice to have something like it to to convert browser into a basic HTML editor! Keep learning.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode

Beginner’s quick start to learn React.js

I recently experimented with React.js, so thought of sharing key points that I learnt. Though there are handful of material online, couldn’t find one that covers all in a concise way that can help learn key aspects of ReactJS. I believe this would resonate with few and help them learn, understand and get a jumpstart with ReactJS.

react-js
What is React.js?

React.js is an open source JavaScript based library for building frontend (user interface) of a web or mobile application.

Why React.js?

Every web application core is to have a fast rendering response for better user experience. Because of this ease, users come back often and it leads higher usage and adaptability.

Further, based on how it achieves speed, it is scalable and reusable.

How React.js does it?

React.js works at component level. It helps break an app into many small components with their own responsibilities. This makes things simpler and scalable. With this breakdown,

  • it’s easier to refresh/update a portion of view without reloading an entire page of the app.
  • it leads to build once and reuse across.

Another key part of React.js is being declarative. There is a an abstraction from details on how to do. This makes it easier to read and understand.

A declarative example would be telling my son to make a house craft from paper instead of guiding him with each step of how to get the paper, cut it, paste it to form a house craft. Of course the assumption here has to be true that my son knows how to make it.

A quick comparison with jQuery here (it’s imperative) – it would need details on how to build the house craft.

Translating above in Javascript langauge world:

  • With React – we define on how we want a particular component to be rendered and we never interact with DOM to reference later
  • With jQuery – we would tell browser exactly what needs to be done using DOM elements or events need basis
Key features

Following features help us achieve above:

  • Components – Simple or State

These are small reusable codes that returns a React element to render. This component can have state related aspect based on need.

// Simple component - a Function Component
// props - input to React component - data passed from parent caller
function ComponentExample(props) {
  return <h1>Hola! {props.name}</h1>;
}

// Simple component - a Class Component
class ComponentExample extends React.Component {
  render() {
    return <h2>Hola! {this.props.name}</h2>;
  }
}

// State based component
// Needed when data associated with component change over time
class ComponentExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {author: "Sandeep Mewara"};
  }
  render() {
    return (
      <div>
        <h2>Hola! {this.props.name}</h2>
        <p>Author: {this.state.author}</p>
      </div>
   );
  }
}

For above example component, use normal HTML syntax: <ComponentExample />

  • Virtual DOM

DOM (Document Object Model) is a structured representation of the HTML elements present on a web page. Traditionally, one would need to get elements out of DOM to make any change. In context of an area of a webpage, it would need a lot more work to refresh it with updated content when needed.

React helps here with its declarative API. A copy of actual DOM is kept in memory which is much faster to change. Once done, React uses its ReactDOM library to sync the virtual representation of UI in memory to the actual DOM.

ReactDOM library internally keeps two VDOMs – one before update and one after. With them, React knows exactly what all to be updated in actual DOM and does all of it on the fly leading much faster updates compared to traditional DOM updates.

React.js has a library ReactDOM to access and modify the actual DOM.

To render HTML on a webpage, use: ReactDOM.render()

  • JSX (JavaScript eXtension)

JSX is a syntax extension to JavaScript that follows XML rules. It’s more of a helpful tool than requirement in React as mentioned below in their website:

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code

JSX converts HTML tags into React elements that are placed in DOM without any commands like createElements(), etc.

// Example with JSX
const testHtml = <h2>Hola! Sandeep Mewara</h2>;
ReactDOM.render(testHtml, document.getElementById('root'));

// Same above example without JSX
const testHtml = React.createElement('h2', {}, 'Hola! Sandeep Mewara');
ReactDOM.render(testHtml, document.getElementById('root'));

Normally, we can’t assign an HTML tag to a JavaScript variable but we can with JSX!

  • Unidirectional data flow

React implements one way reactive data flow. It uses flux as a pattern to keep data unidirectional. Interpret it as you often nest child components within higher order parent components. Snapshot of state is passed across from parent to child components via props (readonly, cannot be updated) and updates from child to parent happen via callbacks bound to some control on child component.

  • ES6 compatible

React library is ES6 (ECMAScript 2015 or JavaScript 6) enabled and thus makes it easier to write code in React. Among all changes to standardize JavaScript in ES6Classes introduction is one of them which plays a critical role in React.

  • Lifecycle

Each React component has a lifecycle that helps write a code at a specific time during the flow as per need.

// Use class for any local state & lifecycle hooks
class TestClass extends Component 
{  
    // first call to component when it is initiated
    constructor(props) 
    {    
        // with it, 'this' would refer to this component
        super(props); 
        // some local state initialized 
        this.state = {currentdate: new Date()};
    };   
    
    // executes before the initial render
    componentWillMount() {    
     
    };  
    
    // executes after the initial render
    componentDidMount() {  

    };

    // executes when component gets new props
    componentWillReceiveProps() {   
          
    };

    // executes before rendering with new props or state
    shouldComponentUpdate() {   
          
    };
    
    // executes before rendering with new props or state
    componentWillUpdate() {   
        
    };

    // executes after rendering with new props or state
    componentDidUpdate() {   
          
    };
    
    // executes before component is removed from DOM
    componentWillUnmount() {   
          
    };

    // HTML to be displayed by the component rendering 
    render() 
    {    
        return (      
            <h1>Current Date: {this.state.currentdate.toString()}</h1>
        );  
    }; 
}

For entire React glossary, please refer: https://reactjs.org/docs/glossary.html

Sample application Setup

We will explore and understand more from React’s demo app. We will jump start our sample app bootstrapped with Create React App

I used yarn create react-app demo-react-app and opened the created directory in IDE that looked like:

default react project structure

With above, once I ran yarn start in root folder demo-react-app, app was up and running without any code change. We can see default app hosted in browser at following url: http://localhost:3000/

default home page

Quick look at few key files that connect dots that lead to above UI view:

  • public/index.html

Base file which we browse using url. We see the HTML defined in it. For now, the element to notice would be a div named root.

  • src/index.js

Located at root of app, is like an entry file (like main) for app that has code like below:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

It imported React and related library, CSS file for app, a component named App. After this, it defines a render method which displays whatever is defined in component App as page root element.

  • src/App.js

Defines a function component of React that returns an html with React logo and a link to render.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App; 

How did index.js got connected with index.html?

Create React App uses Webpack with html-webpack-plugin underneath. This Webpack uses src/index.js as an entry point. Because of this, index.js comes into picture and all other modules referenced in it. With html-webpack-plugin configuration, it automatically adds the script tag in html page.

Let’s see with few modifications to the app now!

Specifically I will be changing flavour of above 3 files to play around.

  1. AppHola.js file for a HelloWorld kind of change – displays my name instead of other texts
  2. AppNavigation.js (has portion of pages updated)
    • Introduction – simple display of texts
    • Clock/counters auto updating
    • Random color generator that updates background color of defined area
demo-app-gif

Given this was for beginners, I have not added too much of complexity to the app. I have tried to keep it as simple possible with some variance of what all can be tried.

There are plenty of imports that can be used. For example, in our demo app, to have navigation, we have used a navigation router react-router-dom import (run npm i react-router-dom --save inside root folder).

Hope this short guide/tutorial gives a broad overview about React.JS and how to start development of the same. Keep learning!

Download entire code for lookup from here: https://github.com/sandeep-mewara/demo-react-app

HTML5: Tips !!!

Long time, since I have blogged. Specifically, this particular post – had all the details and wanted to post more than a year back. I guess, better late than never!
Here are few of the HTML5 tips that might help while using it’s various features:

HTML5 WebSocket Protocol is present only from IIS 8.0

HTML5 Web Socket provides a two-way communication over one TCP connection (socket). IIS 8.0 (ships with Windows 8) is capable of accepting Web Socket communications. In order to use the new protocol, one has to enable it in IIS 8.0, using option “Turn Windows features on or off” present in the control panel. It should look like below:
WebSocketIIS8
A quick detail on how WebSocket works can be looked here in my article: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#websocket
 

One can support new HTML5 elements in older browsers using HTML5 shiv

Older browsers that are still widely used by end users (namely IE6/7/8) do not have support for the new elements in HTML5. One great way to enable HTML5 element support in IE6/7/8 is to have the http://code.google.com/p/html5shiv/
As noted on the linked Google page, “shiv” and “shim” are interchangeable terms in this context.
In case interested, I came across a good sample example and details out here: http://www.sitepoint.com/html5-older-browsers-and-the-shiv/
 

Elements in HTML5 can easily be made draggable

The specifications defines an event-based mechanism – a JavaScript API and additional markup for declaring it. Any type of element can be marked draggable on a page. It’s a known fact that having a native browser support for a particular feature is best as they would be faster and provide a more responsive application.
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#dragdrop
 

‘Type’ attribute for script and link are no more required in HTML5

Type attribute is optional and one does not need to provide it for script and link tag in HTML5.
Earlier, one used to give:

<link rel="stylesheet" href="somepath/somestylesheet.css" type="text/css" />
<script type="text/javascript" src="somepath/somescript.js" />

Now, in HTML5, same references can be provided as:

<link rel="stylesheet" href="somepath/somestylesheet.css" />
<script src="somepath/somescript.js" />

This makes things simpler as the file extension and the tag were enough to interpret the type.
 

async attribute has been added to <script> tag in HTML5

HTML5 has added a new attribute for <script> tag, which is async. With this attribute, the external script will be executed asynchronously as soon as it is available. It has no effect on inline scripts.
Inline scripts and scripts without async or defer attributes are fetched and executed immediately, before the browser continues to parse the page.
 

In HMTL5, all unknown element in all browsers are displayed inline by default

The three most commonly used values are none, block, and inline. All elements have an initial or default state for their display value.For all HTML5 elements, by default they have a computed display value of inline.
 

In HTML5, page and worker do not share the same instance

In HTML5, page and worker do not share the same instance – a duplicate is created on each pass. Data passed between the main page and workers are copied. Objects are serialized as they’re handed to the worker, and subsequently, deserialized on the other end. I read that most browsers implement this feature as structured cloning. (The structured clone algorithm is a new algorithm defined by the HTML5 specification for serializing complex JavaScript objects.)
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#webworkers
 

In HMTL5 Offline, relative URLs listed in a manifest are resolved relative to the manifest file

Yes, the urls in the manifest are relative to manifest’s own url. It is not to be confused that they are relative to root. Though it might happen that the urls relative to root work good because the manifest file might be located in the application root.
A quick detail about the feature can be read here: http://www.codeproject.com/Articles/546960/HTML-Quick-Start-Web-Application#offlineapp

HTML5 Quick Start Web Application

HTML5 Quick Start


I was learning HTML5 features since December. While going through it, I was playing around making a sample web application fully HTML5 enabled – kind of self learning kit that would give a basic knowledge to anyone who goes through it. Plan was to publish it as an article so that others can learn quickly and have basic features at one place. One can play around with the feature implementation straight away post download.

It took me some time to write the article as it covered good number of features. I finished working on it and have published it today on CodeProject: HTML5 Quick Start Web Application

One can have a look at it there and provide feedback.

UPDATE: Missed uploading this to Github earlier, uploaded here: https://github.com/sandeep-mewara/HTML5QuickStart

Keep learning!