mciastek

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js')
      .then(function(registration) {
      
        // Registration was successful
        console.log('ServiceWorker registration successful with    scope: ', registration.scope);
      }).catch(function(err) {
      
        // registration failed :(

mciastek

const VERSION = 'v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  
  // Perform install steps

mciastek

// Create new database
const db = new PouchDB('mydb');

// Put new record to database
db.put({
  _id: '[email protected]',
  firstName: 'Jon',
  lastName: 'Doe'
});

mciastek

self.addEventListener('push', (event) => {
  const title = 'New notification';
  const body = 'We have received a push notification.';
  const icon = '/app-icon-192.png';
  const tag = 'push-notification-tag';
  
  event.waitUntil(
    self.registration.showNotification(title, {
      body,
      icon,

mciastek

self.addEventListener('notificationclick', (event) => {
  
  // Android doesn’t close the notification when you click on it
  // See: http://crbug.com/463146
  event.notification.close();
  
  // Do some stuff
});

mciastek

├── /base
│  ├── _core.scss
│  ├── _colors.scss
│  ├── _settings.scss
│  └── _typography.scss
├── /utils
│  ├── _animations.scss
│  ├── _easings.scss
│  ├── _grid.scss
│  └── _misc.scss

mciastek

// *** Vendor ***
@import 'sanitize.css';

// *** Settings ***
@import './base/settings';
@import './base/colors';

// *** Utils ***
@import './utils/easings';
@import './utils/animations';

mciastek

// Names
$white: #fff;
$black: #000;

$aquamarine: #7fffd4;
$alabaster: #f9f9f9;
$alto: #d9d9d9;
$mine-shaft: #333;

// Roles

mciastek

// Bad
.article {
  .title {
    color: $accent;
  }
  
  .text {
    color: $text;
    
    .img {

mciastek

.link {
  &:hover {
    color: $accent;
  }
  
  &::after {
    display: inline-block;
    content: '\0362';
    vertical-align: middle;
  }