My daily work mainly consists of creating Back End features, so attending this conference seemed a little bit exotic at first. However, Render Conference’s great talks have broadened my perspective on what the Internet looks like to other people, how the Internet connects us, and how we should improve it to make it more accessible for everyone. And it wasn’t another conference for geeks. This event was addressed to anyone who cares about quality and aesthetics on the Web. Let’s dive into the details and see what my favorite talks were about.
Accessibility Is More Than Just Supporting Screenreaders – Seren Davies
Seren prepared a really wonderful presentation! I was impressed by her sensitivity. She seems to be able to see what other people don’t. She talked about accessibility on the Internet in a way I’ve never thought of before. It was one of most important speeches on Render Conference, because it touched upon an unnoticed topic, but one that concerns a vast group of people. I create layouts and views every day – and yet I’m unaware of human disabilities. She made me think of them. And I want to follow the steps which Seren talked about. I’d like to encourage all of you to watch Seren’s short Render Conference talk.
Coding Art by Mathieu ‘p01’ Henri
I really enjoyed this talk, because it was close to what I do on a daily basis. During his performance Mathieu played with sounds, images and code. He said few words about himself: that he’s not a developer, but an artist. He totally proved it. Using simple JavaScript code, a little bit of math and html canvas API he created a piece of art. In twenty minutes, he developed an automatically generated mountain landscape based on a piece of a music. He showed us that by presenting simple things in an unconventional way, it is possible to create something great, something innovative. This presentation was very inspiring, and it encouraged me to perceive the Web as a piece of art. Here are the results of his live coding.
Hack to the Future by Seb Lee-Delisle
Seb Lee-Delisle is another great visionary next to Mathieu Henri. He took us on journey back to the 80’s and 90’s. What could I say about that time? I was born in 1994, so not a lot, yet I was amazed by his work. Seb reprogrammed some video games such as Flappy Bird or Asteroids. To display the view, instead of using a common LCD screen, he used a laser. The effect was astonishing. An analog way of representing game scenes is uncommon, but in fact it looks really impressive. In Flappy Bird, he implemented voice recognition to control the bird. And again, he did ordinary things, but in an extraordinary way. People often think that old things are useless and rubbish, but Seb showed the audience that inspiration drawn from popular history can bring really good results. You should definitely find Seb on twitter and find out what he’s working on today!
Progressive What Apps? – Patrick Kettner
This was my favorite Render Conference talk. Patrick Kettner talked about progressive Web apps. They’re one of the hottest things to have come to the Web in years. So, I wanted to hear something new about them. His speech was packed with interesting information. Let’s take a closer look.
If you aren’t familiar with this term you may ask…
So what exactly is a progressive web app?
Progressive Web App denotes a web app that uses the latest web technologies and combines features offered by most modern browsers and mobile experience. It can behave like a first-class application in the user’s native operating system. According to Google Developers, a progressive web app should be:
- Reliable – load instantly even in uncertain network conditions.
- Fast – respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging – feel like a natural app on the device, with an immersive user experience.
Over the years, people have been suffered from loss of the Internet connectivity. Even the best app in the world will be useless if you can’t download it. There are various ways to make your app progressive, but I want to show you a solution which will make a website accessible without connection to the Internet. It’s based on Service Workers which expose an API available in modern Web browsers.
To use the service worker API, you should be familiar with JavaScript promises. Then you can start writing your first service worker. It’s quite easy. Service worker is just a JavaScript file residing inside app. It serves to cache website on user’s computer and fetch it if user is offline. In this example I will call it sw.js and the example origin directory will be called /app-test.
Register a service worker
First, you should detect if service workers are supported by your browser and then register one for your site. It can be done with this short and easy piece of code, which you should put in main JS file:
As I said, a service worker is just a JavaScript file. Its URL should be passed as a first argument to register function. The scope parameter is second. It’s optional and it’s used to control subset of content you want the service worker to control. It’s specified to /app-test, which means all the content in application. If you leave it empty, it will default to this value.
Install and activate sources in cache
After service worker is registered successfully, the install event is fired. You should handle it in you service worker file. This event is used to populate your sources into cache in order to have access later being offline. By using the function below, you can list files which will be cached as an array of URLs. You have full control over what you want to add. All files should be added when service worker is installed. That’s why in this piece of code a ExtendableEvent.waitUntil() method is chained to install event. It ensures us that code inside waitUntil will be occurred first. The caches.open method creates a new cache and takes one parameter which is the name of the cache. When cache is created successfully then promise resolve function is executed. In this case it is addAll method which performs adding array of URLs mentioned before.
Make your resources available offline
So once you’ve registered your service worker and handled the install event, you need to tell your service worker what to do with cached content. This is easily done with the fetch event, which is fired every time any resource controlled by service worker is fetched. You can attach a fetch event listener to the service worker and then call respondWith method on the event. Actually, it’s hijacking HTTP requests and updating them with your own functionalities. You can start by simply matching resource’s URL and requests.
You can also provide your own custom response. To do that, check for more information about Response objects.
You should place this piece of code in the service worker file as well. And that is all. Your first service worker is implemented now. Now your website can be served without the Internet connection, because service worker will cache it on user’s computer. You should definitely find out how to recover requests which aren’t matched, and how to delete and update caches in service worker. You can read it here and find a sample project here.
Making the Web a better place
I love the idea of websites which are available to the user without an Internet connection. I would be happy if all Web developers aimed to attach this functionality to their sites. And I’m thankful to Patrick Kettner who gave this speech and brought us closer to Service Workers API. What’s more, I strongly believe that progressive web apps can make the Internet a better place. I recommend watching Patrick’s presentation on YT. He has a funny story behind his motivation to start making progressive web apps.
Render Conference was incredible!
So, I am really glad that I could attend Render. It was an incredibly valuable adventure. Thanks to all the speakers who inspired me in so many ways. And I strongly recommend watching all of the session recordings on YouTube. I hope to go there next year to find out what the new trends in the Web are.
