Business,  en,  Software & scripting

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:

    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')
          h1 curriculum vitae & more about Joachim Herwig    
            .col-md-3.label lastname
            .col-md-8.value Herwig
            .col-md-3.label firstname
            .col-md-8.value Joachim
            .col-md-3.label date or birth
            .col-md-8.value 1976-04-30
            .col-md-3.label languages
              a(href="cv_de.html") german
              |  (mother tongue), english (business fluent)
            .col-md-3.label nationality
            .col-md-8.value german
            .col-md-3.label familiy status
            .col-md-8.value married - two children
          h2 latest jobs

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

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

here you can see the result

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:

2016-08-10 15_56_27-Profil Joachim Herwig

and responsive on a smaller screen eg. mobile device:

2016-08-10 16_00_27-Profil Joachim Herwig

Checkout the example repo @