Layout never was so easy to declare. Come with some fancy ASCII art and you'll see how your elements are gracefully placed around.
The State of the Web
A bunch of cool stuff in 2017
Stablished technologies
- Service Workers
- Background services in the browser
- Push notifications
- Receive and show Push notifications
- Async functions
- JS syntax enhancement to ease asynchrnonous programming
- Feature Queries
- Check the existence of CSS features withour JavaScript
Recently added technologies
- CSS Variables
- Store repeated values in CSS variables
- Web Animations
- Native performance on dynamic animations
- CSS Grid
- A new CSS layout to build 2D grids
- WebGL 2.0
- JavaScript API to access OpenGL ES 3 hardware capabilities
- Web Assembly
- A new language inside the browser
Patterns, trends & topics (1/2)
- Offline First
- Connectivity as a progressive enhancement
- Transpilation
- A technique to use other languages rather than JavaScript
- RAIL & Optimistic UI
- Performance models and techniques to keep the illusion of real time
Patterns, trends & topics (2/2)
- Privacy, security & safeness
- Be aware of the threads of the Web
- Progressive Enhancement
- Web development approach that puts effort on baseline
- Progressive Web Apps
- Web applications offering native-like user experiences
Coming soon (1/2)
- HTTP2
- A faster evolution of HTTP
- Sync
- Be aware of recovering connectivity
- Manifest
- Allows your website to better integrate with the OS
- Payment Request
- JavaScript API to improve payment UX
Coming soon (2/2)
- Credential Management
- JavaScript API to improve login UX
- Request Idle Callback
- An API to get a browser idle time window
- WebVR
- A JavaScript API to use VR devices
Service workers
Go to indexThis day goes to #PWA history! Initial steps of #ServiceWorker in #Safari: https://t.co/WU4Uin6ZHP. Kudos to @bradeeoh & all @webkit team! pic.twitter.com/FFf95pDxde
— Maxim Salnikov (@webmaxru) 3 de agosto de 2017
Run when an external event is triggered regardless there were open views of the website.
Push
Go to index
Async functions
Go to indexfunction search(query) {
return fetch(`/search/?q=$(query)`)
.then(response => response.json())
.then(json => json.results.map(...))
.catch(reason => console.log(reason));
}function search(query) {
var resp;
return fetch(`/search/?q=$(query)`)
.then(response => {
resp = response;
response.json()
})
.then(json => {
json.results.map(result => doSomething(result, resp));
})
.catch(reason => console.log(reason));
}async function search(query) {
try {
let response = await fetch(`/search/?q=${query}`);
let json = await response.json();
return json.results.map(result => doSomething(result, response));
}
catch (reason) {
console.log(reason);
}
}Feature Queries
Go to indexThe following example is from Using Feature Queries in CSS by Jen Simmons
Try it in Safari which supportsinitial-letter.
The carrot is a root vegetable, usually orange in colour, though purple, black, red, white, and yellow varieties exist. Carrots are a domesticated form of the wild carrot, Daucus carota, native to Europe and southwestern Asia. The plant probably originated in Persia and originally cultivated for its leaves and seeds. The most commonly eaten part of the plant is the taproot, although the greens are sometimes eaten as well. The domestic carrot has been selectively bred for its greatly enlarged, more palatable, less woody-textured taproot.
#feature-queries p::first-letter {
color: #FE742F;
font-weight: bold;
}
@supports (-webkit-initial-letter: 4) or (initial-letter: 4) {
#feature-queries p::first-letter {
-webkit-initial-letter: 4;
initial-letter: 4;
margin-right: 0.5em;
}
}Custom Properties (CSS Variables)
Go to indexThe highlight color, #b4ff43, is used in many contexts like links or selection. And also in borders and decorative elements.
:root { --hl-color: #84b830; }
.container {
font-size: calc(var(--font-factor, 1) * 1em);
box-shadow: 0 0 100px 10px rgba(128, 128, 128, var(--shadow-alpha, 0.1));
}
.container a:link { color: var(--hl-color); }
.container p::selection { background-color: var(--hl-color); }
.container p { border: 3px solid var(--hl-color); }
.container span { color: var(--hl-color); }
.container:hover {
--font-factor: 2;
--shadow-alpha: 1.0;
}Web Animations
Go to index
rightFox.animate(
[
{ transform: 'rotate(0deg)' }, // from
{ transform: 'rotate(360deg)' } // to
],
{ duration: 1200, iterations: Infinity }
)CSS Grid
Go to indexCSS Grid Example
.container {
display: grid;
grid-template-areas:
"t t t t n n"
"a a b b n n"
;
}
header { grid-area: t; }
nav { grid-area: n; }
article { grid-area: a; }
footer { grid-area: b; }WebGL 2.0
Go to indexWeb Assembly
Go to indexOffline First
Go to indexTranspilation
Go to indexRAIL & Optimistic UI
Go to indexPrivacy, security & safeness
Go to indexProgressive Enhancement
Go to indexProgressive Web Apps
Go to indexCan you tell what is the native app?
And now?
But you certainly do now.
Or now.
HTTP/2
Go to indexMultiplexing
Push / Server Hint
HPACK
Sync
Go to index
Manifest
Go to indexWeb Manifest
{
"name": "Flipkart Lite",
"short_name": "Flipkart Lite",
"icons": [ {
"src": "https://img1a.flixcart.com/www/linchpin/logo_lite-cbb3574d.png",
"sizes": "192x192",
"type": "image/png"
} ],
"start_url": "/?start_url=homescreenicon",
"orientation": "portrait",
"display": "standalone",
"theme_color": "#006cb4",
"background_color": "#006cb4"
}Partial manifest from Flipkart Lite.
Web Payments
Go to indexThis is not a payment method.
The browser becomes a mediator to manage payment instruments and sensible data in a safe way.
Credential Management
Go to index
Request Idle Callback
Go to indexWebVR
Go to indexA-Frame
A 360 picture viewer in 6 lines of HTML code.
See the Pen 360º panorama viewer by Salvador de la Puente González (@lodr) on CodePen.
Salvador de la Puente González