Table layouts and DHTML are the hottest interweb tech
Table layouts and DHTML are the hottest interweb tech!

		

		

	
	

	
		Back in the day developers crafted beautiful layouts with tables, which later fell out of style:
<tr>
  <td>foo</td>
  <td>bar</td>
  <td>baz</td>
</tr>

For the last few years CSS frameworks like Bootstrap and Foundation have taken hold. In the latest advancement Flexbox is taking hold. Flexbox paired with React.js allows you to write layouts like this:
<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>
With the addition of the responsive concept, it looks like we’ve come a full circle. We’ve come a full circle as table like methods are again used for describing layouts.
DHTML and Web Components
Around the same time as table layouts were still the way to go, we had a technology called DHTML that was used to manipulate the DOM on the browser, after the server had sent it. The D in DHTML was really just some JavaScript.
DHTML was used for all kinds of tricks, menus and other things. Together with table layouts, it quickly fell out of style with the Web Standards and accessibility wave of the early-mid 2000’s. Technology wise it became the ideal to separate concerns to HTML for content, CSS for layout and JavaScript for functionality.
Fast forward to 2016 and the hottest thing is web components with all functionality mixed together – allowing for practical copy-paste adoption of bits and pieces. Just like DHTML.
As an example, consider this DHTML scroller from @sumppi and see how elegantly it combines together DOM manipulation, inline events (OnClick and friends) as well as even inline styling:


And compare it to this state of the art React.js components written in ES6 and even embracing all dat JSS goodness:






import React, { Component } from 'react'



import useSheet from 'react-jss'








// You can use jss directly too!



import jss from 'jss'



import vendorPrefixer from 'jss-vendor-prefixer'



jss.use(vendorPrefixer)








const styles = {



  button: {



    'background-color': 'yellow'



  },



  label: {



    'font-weight': 'bold'



  }



}








class Button extends Component {



  onClick: function(e) {



    alert('hello!');



  },  



  render() {



    const { classes } = this.props.sheet








    return (



      <div className={classes.button}>



        <span className={classes.label} onClick={this.sayHello}>



          {this.props.children}



        </span>



      </div>



    )



  }



}








export default useSheet(Button, styles)



The latter obviously better, but the underlying concepts are the same. In 2006 it would have been the most horrible thing, yet at this moment in time it’s the best thing ever. That’s what’s funny.
I for one welcome the renewed value of my nineties skills. Time to buy some DynamicDrive stocks, ya’ll.

			
				

	
	





	
		Post navigation
		
	
		
	