Entropic web
•
0 likes•822 views
The physical universe and the online web universe have many similarities. This talk looks at several of those likenesses and explores the concept of Entropic Websites.
Recommended
More Related Content
Featured
Featured (20)
Entropic web
- 27. Physics is hard
- 31. “… physicists analyse systems. Web Scientists, however, can create the systems.” - Sir Tim Berners-Lee
- 33. Entropy(ic) Web
- 40. Modular Design
- 41. Modular Design
- 42. Style Guides
- 43. Atomic Design
- 44. c = Speed of Light
- 45. c = 186000 mph
- 46. c = 299,792,458 ms
- 47. Speed of Light
- 48. c = 299,792,458 ms
- 49. 0 1 2 3 4 220 200 180 160 140 120 100 80 60 40 20 0 PageLoadTime(s) Round Trip Time (ms) 0 1 2 3 4 1 2 3 4 5 6 7 8 9 10 PageLoadTime Bandwidth (Mbps)
- 53. Speed is limited. Location is not.
- 57. Critical CSS
- 58. Critical CSS
- 62. Prerender
- 71. Bringing it together • Be Responsive • Design/build modular • Shorten distances • Pack smart • Respect the URI
- 76. http://www.nasa.gov/centers/jpl/images/content/650600main_pia15416-43.jpg The primary design principle underlying the Web’s usefulness and growth is universality. ”
Editor's Notes
- Use the universe as a backdrop to the web we know today. But first a story.
- I love the Universe. Every night when I put my little boy to sleep, he’s two, I tell him the same story. He has a night light that has star and moon shapes on it, and it casts the light against the side of his cot producing a stars and moons at various sizes. I tell him that his toys are looking up at the stars and signing the lullaby to him as he falls to sleep. I also tell him that if you stare a spot in the sky that is about the size of the star on the side of his cot and stare for a very long time, with a very powerful telescope, that eventually you will see beyond the stars you see in the night sky and beyond our own Milky Way Galaxy. The longer you stare the more you can see beyond, and what begins to take shape are small clumps of light.
- - these are galaxies
- We live in a galaxy as well Our Galaxy is called the Milky Way
- Our galaxy, like the others, is made up of stars, lots of stars… 100-400 Billion stars. We happen to live near a star, our star is called The Sun
- Stars sometimes are orbited by planets We live on a planet, we call it Earth.
- On our planet we have sand For every grain of sand on Earth there are 10,000 stars in the visible Universe
- On our planet we have sand For every grain of sand on Earth there are 10,000 stars in the visible Universe
- If you took every grain of sand on Earth,
- and every grain of sand on every other planet like earth around our Sun.
- And took every grain of sand on every planet that orbited around every other star in our Galaxy,
- then took every grain of sand on every planet that revolved around every star in the hundreds of galaxies that you can see in that small patch of sky. Then expand that patch of sky across our entire night sky… and then expand that entire night sky across the other side of the world again…. That’s how much mum and dad love you.
- and if you add up all of those grains of sand that’s how much Mum and Dad love you. - Cute isn’t he.
- He’s not always that cute. But when I tell him that story I think of the vastness of the universe.
- This is a visualisation of the Universe. It’s real data that we have collected from space and it is a virtual fly by of the universe. Every on of those specs of light you see flying past is a Galaxy like our own Milky way that houses anywhere between a Billion and a Trillion stars each. The thing I love about this is that this is what I imagine the web being like if I could fly around the web.
- I love the Universe, but equally I love the web. Describe it’s vastness and complexity. Also cover that we mimic nature. In design we mimic nature, so it’s only natural that the web has mimicked the universe.
- The Internet in 2003 These lines and points represent the network of the internet across the globe in 2003.
- In 2010 the internet had grown substantially more complex.
- And again in the latest visualisation of the Internet in 2015 The web hasn’t always been this complex though.
- http://info.cern.ch/hypertext/WWW/TheProject.html It started here with a simple, responsive, crossbrowser… could work on every single device with a browser possible web page. It has grown over years
- I find it no surprise that the man that invented the web, Sir Tim Berners-Lee, did so at CERN which is the very place where a lot of the discoveries about the beginning on the Universe are being confirmed. I believe that we always look to mimic the things around us and the things that work. If you go back far enough all of our mimic-ing will have been done through Nature… after all it survived for a long time before we started trampsing around the place.
- This picture shows a column within the Sagrada familiar designed by Antonio Gaudi and while having issues with the weight of the structure took the structure of trees to increase the weight bearing… he also have the columns built with a slight twist as it ascended to provide more strength, like that of the larger trees.
- I was never driven enough to work hard at Physics to break into the physics world, but I was driven enough by the web. It was new, it was hip, and no one really knew what they were doing. The most amazing thing about it as well was the barrier to entry.
- In Physics you were required to know all kinds of crazy formulas to grasp just the basics of how the Universe worked… or at least how to write down and explain how it worked. This, for example, is the equation for Entropy.
- HTML was so much easier to comprehend. It was forgiving as well. If you made a mistake it wouldn’t care, it would just ignore what you got wrong and allow you to continue to build what you wanted. CSS was very much the same, ignoring your mistakes and continuing on. CSS however…
- Positioning things on the screen with CSS. This is my physics equation. The ability to centre an object on the screen used to be a nightmare. Junior Apprentice We had float: so we hacked it to make things position nicely. Then we hacked clear fix to reset everything again. Then hacked together sprites to make less requests because that was faster. The advantage the web has over the universe is that we are able to change the rules of the web…
- Sir Time Berners-Lee said “… physicists analyse systems. Web Scientists, however, can create the systems.” That means that you and I have the ability to shape our own Universe. Our universal web. And we have done this over the years. Where it was really difficult to position things on the screen we have Flex Box to help us.
- - Fortunately though, the web and it’s standards don’t have to be governed by the laws of the universe… at least not very often. - Instead we can pass our own laws and continually develop the web in the direction that the community decides it should be heading. Flexbox - center things. easily add navigation items without them breaking. Easily create interfaces for unknown number of objects. Lets go back to the grains of sand.
- There is an important law of physics for understanding the evolution of the universe and the passage of time, the second law of thermodynamics. At it’s heart it contains a radical new concept, Entropy. Entropy describes that why, left to the elements, mortar crumbles, glass shatters and buildings collapse. Everything returns to sand and dust. To understand this is better it helps to think of the objects not as single things, but made up as many constituent parts…
- Lets take this sand for example. We could lift up handfuls of that sand and throw it back in the pile, rearranging them pieces in a million different ways we will still have the pile of sand… but if we use the same sand to construct a sand castle
- If we take this sand and put it into a sand bucket and build a sandcastle — that sandcastle has a low entropy. The arrangement of the sand to allow it to form the sandcastle is very descriptive and less likely to occur in it’s natural state… the chances these grains of sand will rearrange into the same sandcastle are incredibly low. This is what the printed world was like, as was the early days of the web.
- We built interfaces that could only be achieved and consumed in a single format, and then chances they could be consumed in any other was unlikely… almost impossible. 800x600 IE and Netscape Compliant. This webpage is best viewed in….
- We live in a world now where the web can naturally take any number of forms… and we need to build websites and interfaces that allow these grains of sand to easily find their way naturally into the device we are consuming the information from.
- In 2007 with the advent of the iphone.
- And this quickly spread as more and more devices were created.
- The answer was Responsive Design… using fluid grids, flexible media and media queries to enable one website for every available device. The next big problem was how could we deal with the design for this new way.
- The answer is to start looking at our websites like the grains of sand that form our sand castle. Rather than look at the whole, we look at the constituent parts. This allowed us to start building styleGuides
- Styleguides.io is a wonderful learning resource for anyone that needs to direction or inspiration when looking at your own work. A tool that helps you break down your design further is Brad Frosts Pattern Lab
- I won’t spend too much time here because Brad is going to be speaking next. But like our universe is made up from atoms and molecules so too is Brad’s Pattern Lab. Thermodynamics and Entropy isn’t the only law that governs us though.
- c is the symbol for the speed of light. I didn’t know that numbers were a German thing but here you go….
- 186 thousand miles per hour
- Two hundred and ninety nine million…. 792 thousand, 458 meters per second.
- This is the limiting speed of the universe. Nothing travels faster than the speed of light. This is as true in the vastness of the universe as it is on the constraints of our earth, and our own infrastructure. The wires and switches that connect everything tother, the fibre.
- When we talk about the speed of our websites we’re talking about the speed of light As performant as we can make our site we still are faced with the issue that we live in one location and our website is being served from a totally different location.
- As performant as we can make our site we still are faced with the issue that we live in one location and our website is being served from a totally different location. This diagram https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/#map illustrated the In fact, upgrading from 5Mbps to 10Mbps results in a mere 5% improvement in page loading times! For every 20ms improvement in latency, we have a linear improvement in page loading times.
- Berlin at 10ms round trip it barely makes it to London.
- At 50ms we’re not even getting to the Squarespace Servers held in New York.
- At 100ms we’re not even close to hitting Australia… let alone the East of Australia where most of our population resides. This is if you have a connection going straight from your computer all the way to the server too, We’re not even considering going through the ISP’s or the DNS switches and routers. On a mobile device you have even more problems. - If you’re phone isn’t warmed up to the connection that can take anywhere between 500 and 1000ms to connect before experiencing 35-90ms latency on the fastest 4G lte to 400-900ms on a 2G network…. and remember there are more 2G users in the globe right now than 4G users.
- While speed is a limiting factor, the location of the content is not.
- We can use tools like Fastly or Cloudflare to act as a proxy for our sites. This means that the content is even closer to our users, we save on bandwidth. They offer a whole bunch of other benefits too like compressing images, free HTTPS support and HTTP2 SPDY that helps even more with performance. Now the cloud flare logo reminds me a little bit of a book cover.
- The martian is a wonderful book. For anyone that loves their science this combines actual science with a great story. The concept is an astronaut is stranded on Mars and has to survive for around 2 years to be rescued in a location only designed to house them for 31 days. The wonderful part of this story is the preparation that is required for Space travel. As we’ve already discussed it takes a very long time to travel distances in the universe due to the pesky speed of light. It takes more than 8 minutes for the light of the sun to reach us. To solve the problem of sending a spaceship to Mars with everything you could possibly need they devised a better approach. Everything they needed for the mission was sent years before and confirmation of their arrival was confirmed before the astronauts set off on their journey. They didn’t even send fuel to get home, but instead a fuel plant to make fuel for the 18 months on Mars while they travelled there.
- We have the same opportunity. By taking advantage of what we know about the complexities of web travel and building our sites and interfaces we can plan ahead and avoid any mistakes, and when there are issues have a foundation to overcome them. This isn’t just around performance either. By utilitising things like pattern lab and style guides we can reuse the same elements across the site, meaning less additional design elements.
- Critical CSS will bring all of the styles needed to provide the first user impression immediately without having to do a series of other requests. Not using Critical CSS is the equivalent of sending all the astronauts over to Mars, wait until they arrive, then let them open up a list of things they need only to have to go back to Earth and get them. How does it look?
- This is the interface that we want everyone to be able to see when they arrive
- Left : without critical CSS Right : with - you still have the content but it’s not styled. Later on we can see how much improvement on performance you can get.
- These are examples of how we can continue to improve upon the rules within our own web universe. We’ve added these two items. Google chrome already do something like this when you type in the address bar. Saves extra round trip Another example of changing the rules of our universal web to make it look better…
- Preconnect allows you to initiate the DNS, TCP, and TLS handshakes before the request is made shaving 1/2 second latency on this request. Shipping in Firefox 39 and Chrome 46!
- Do not abuse this because your using up peoples data and battery without them knowing. Speaking of battery….
- While in this comic XKCD poke fun saying that he can’t focus on the content when the battery is low there is something in this. If my battery is running low I want the content that I need as fast and battery friendly as possible. I don’t want to allow anything to happen to use up more battery like that prerender we saw before for example.
- Choreography.io is a animation library based on the animation API that incorporated this. In this example they are disabling the animation affects when the battery is low, but a better solution would probably be to load them in if the battery is above a certain level. You could extend this to cpu or gpu intensive thins like canvas and webgl.
- The human race loves to explore. For a long time we’ve gazed up at the stars and longed to explore. Last century we made it into Space and landed on the Moon and now we have people like Elon Musk, who also is responsible for the Telsla shown in Emma’s talk, and his SpaceX project working towards colonising Mars. The problem with this exploration is it takes a really really long time. That makes travelling around it incredibly difficult until we can find some way to perform Interstellar Travel. The concept is that you move from one location in Space(space/time) to another location almost instantaneously. This is famously described in its simplest form with a piece of paper and a pencil (do the demonstration). We can’t do this yet… at least not when it comes to Space Travel. HyperDrive
- In many ways The web is just as large as the Universe. It’s ever expanding and there are distances and speed of light issues that I’ve discussed before. The amazing thing with he web, and what makes it what it is… is the URI. This is a set of coordinates just like with have in Space, but with the bonus that anyone can use those coordinates and link from anywhere TO anywhere. We have interstellar travel, we have the Hyperlink. - Argument of native app vs web. Why argue? You should be building both. Many exampes of the web and native working together. using a single URI. - Hyper Drive - we have the hyper link.
- My wife and I are looking to buy our first place shortly and I occasionally get emails for places that I can’t afford. Using the app she shared this link to the site, when I clicked on it I have the option to review the property on their mobile responsive site, or I can choose to View on the app. I can email or Call, view the images, see the details. This view link is a iOS specific link that takes me directly to the location within the app I need to be, or refers me to the app store to download It doesn’t force me one way or the other.
- Here it open the link and directs me straight to the property I was looking at. Still call and email the agent, but now I’m immediately logged in and I can store this as a favourite.
- Here it open the link and directs me straight to the property I was looking at. Still call and email the agent, but now I’m immediately logged in and I can store this as a favourite.
- Here it open the link and directs me straight to the property I was looking at. Still call and email the agent, but now I’m immediately logged in and I can store this as a favourite.
- RWD - best way to build something for the ever growing number of devices MODULAR - focus on the constituent parts so that you can build high entropy websites SHORTEN - get closer to the user. Use things like CDN’s Cloudflare and Fastly. Pack Smart - use things like Critical CSS, preconnect, prerender, concatinate and compress your files. Respect the URI. Everything needs to have a coordinate. Lets lookout an example.
- I don’t have an app to test this on so instead I used the Mobx Site. The changes that was done on this site was done in the time it took to fly from London to Berlin. Top row we have the home page Bottom row we have the speaker bio Left column we have the updates Right column we have the current site.
- Combined all the JS & CSS into a single file each- reduce requests therefore remove multiple latency issues Crtictical CSS Preconnect Applied Responsive images to these pages Pushed this onto a free Cloudflare account
- In closing I wanted touch on one last story. 1781 - 1841 : 60 years Wrong place Newtons laws. Using these laws of the Universe and pages and pages on mathematic equations in 1846 they were able to say exactly where and when in the sky an astronomer could look to see the object causing the orbital anonomly.
- 23 September 1846 Neptune was discovered within 1 degree of the mathematics estimations. Because of the laws of the universe we can successfully hypothesise the location of a planet, or a black hole and any number of other things. With the universal web however— we are in control of it’s laws and how it will evolve over time. Outside of the laws of the universe, like speed of light, are no set rules we can use to predict the future of the universal web, mobile or otherwise. Instead we need to build it in a way that it will continue to be future friendly in generations to come, just like the first web page. Speaking of the first webpage…
- The primary design principle underlying the Web’s usefulness and growth is universality. As we grow our own universal web larger it is important that we take the fundamentals along with us to ensure that we don’t loose the wonderful thing that we have built.
- Danke. Thank you.