pure web – super fast

currently i’m deeply involved in a cloud / web development project. While monitoring all the developments in the world of web developing – including all the templating, content-management-stuff etc. i was shocked about the extremely weak performance of most web pages.

When you simply press [F12] in your Chrome or IE you will notice, that most of the websites load hundreds of files, plenty of frameworks etc.

Well… while I use an web content management tool for this site as well – lazy publishing – I wanted to check out, wheter it is still possible to publish fast and simple websites without all that mostly unneccesary clutter.

So i started using not more than

• a text editor like VS Code
• a PUG compiler
• a SASS compiler
• a simple sFTP-Client

and tried to publish a really simple but fast page.

I wanted to show, that it is easily possible to build a good looking website that loads in miliseconds instead of seconds or even minutes and that can be run even via worse GPRS connections. Not in every case it really makes sense to rely on huge frameworks or publishing systems.

This is an extract of how I coded the html using PUG:

doctype
html
  head
    meta(charset='utf-8')
    title CV of Joachim Herwig
    meta(name='description', content='curriculum vitae of Joachim Herwig')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(rel='stylesheet', href='sass/cv.css')
  body
    .headergradient
    .headerimage
      img.planeimage(src="img/PilatusPC12NG_Spectre-background_HE.png")
    .container
      .row.title
        col-md-12
          h1 curriculum vitae & more about Joachim Herwig    
      .row.personalstuff
        .col-md-4.pull-right.photo
          img.img-responsive(src="img/joachim-herwig.jpg")
        .col-md-8
          .row
            .col-md-3.label lastname
            .col-md-8.value Herwig
          .row
            .col-md-3.label firstname
            .col-md-8.value Joachim
          .row
            .col-md-3.label date or birth
            .col-md-8.value 1976-04-30
          .row
            .col-md-3.label languages
            .col-md-8.value 
              a(href="cv_de.html") german
              |  (mother tongue), english (business fluent)
          .row
            .col-md-3.label nationality
            .col-md-8.value german
          .row
            .col-md-3.label familiy status
            .col-md-8.value married - two children
      .row.joblist
        .col-md-12
          h2 latest jobs
        .row.job
          .col-md-8
            .row
...

And this is an extract of the corresponding SASS-File:

...

@Media screen and (min-width: 992px)
  body
    .headergradient
      background-image: linear-gradient(#4287b0, #acd9ee 75%, #ffffff)
      z-index: 0
      position: fixed
      top: 0px
      left: 0px
      width: 100%
      height: 300px
    .planeimage
      width: 500px
    .headerimage
      z-index: 10
      position: fixed
      top: 0px
      left: 0px
      width: 100%
      height: 100%
  .container
    position: relative
    /*position: absolute*/
    top: 200px
    margin-left: auto
    margin-right: auto
...

here you can see the result

• in german

Well… in my opinion, i archieved the goal – though i still have some optimization potentials…

And this the structure of the document if you render it in 3D on a normal PC:

and responsive on a smaller screen eg. mobile device:

Checkout the example repo @ https://github.com/joeherwig/web-and-print-pug-sass-template.