Skip to content

Instantly share code, notes, and snippets.

View sconstantinides's full-sized avatar

Stelios Constantinides sconstantinides

33 followers · 7 following
View GitHub Profile
@sconstantinides
sconstantinides / PWAs.md
Created May 3, 2018 18:19
How to install a Progressive Web App

How to install a Progressive Web App

Progressive Web Apps (or PWAs) work across browsers and devices. When installed they may include offline support.

iOS Safari

  1. Visit the app’s website
  2. Click the export icon on Safari’s bottom bar
  3. Scroll the options and select “Add to Home Screen”
@sconstantinides
sconstantinides / App.js
Created May 1, 2018 23:37
Sample Firebase task app
import React, { Component } from 'react';
import firebase from '@firebase/app';
import firestore from './firestore'; // Code: https://gist.github.com/sconstantinides/546a48ba183b1234f750ca6261440199
class App extends Component {
constructor(props) {
super(props);
this.state = {
userId: localStorage.getItem('userId') || '',
@sconstantinides
sconstantinides / firestore.js
Created May 1, 2018 23:23
Sample Firebase config
import firebase from '@firebase/app';
import '@firebase/firestore';
firebase.initializeApp({
apiKey: 'YOUR_API_KEY',
// Configure the above client key at https://console.cloud.google.com/apis/credentials
// Restrict to: *.your-domain.com/* (and localhost for testing)
// Restrict to: Google Cloud Firestore API, Identity Toolkit API
authDomain: 'your-app.firebaseapp.com',
projectId: 'your-app'
@sconstantinides
sconstantinides / script.js
Created April 27, 2018 23:31
JavaScript PWA detection
if (window.matchMedia('(display-mode: standalone)').matches) {
// Is installed in standalone display mode
}
if (window.matchMedia('(display-mode: fullscreen)').matches) {
// Is installed in fullscreen display mode
}
@sconstantinides
sconstantinides / styles.css
Created April 27, 2018 23:06
PWA media queries
/* Replace "standalone" with "fullscreen" depending on your manifest.json display mode */
@media (display-mode: standalone) {
/* All installed PWAs */
}
@media (max-width: 576px) and (display-mode: standalone) {
/* Installed PWAs on mobile devices */
@supports (-webkit-overflow-scrolling: touch) {
@sconstantinides
sconstantinides / manifest.json
Last active July 29, 2018 15:23
React PWA example
{
"short_name": "My App // Should be <= 12 characters. Appears on the home screen once installed ",
"name": "My App // Must be <= 45 characters. Appears in places with more space (install dialogs, etc.)",
"icons": [{
"src": "images/splashIcon.png // Android: Requires a PNG at least 512x512 for your startup screen. This is used along with your app name (above) and background color (below) to generate a splash screen. Learn more: https://developers.google.com/web/fundamentals/web-app-manifest/#add_a_splash_screen",
"sizes": "512x512",
"type": "image/png"
}, {
"src": "images/appIcon.png // Android requires a PNG at least 192x192 for your home screen icon",
"sizes": "192x192",
@sconstantinides
sconstantinides / index.html
Last active July 29, 2018 15:23
React PWA example
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The usual suspects -->
<meta charset="utf-8">
<meta name="description"
content="My app is awesome because...">
<title>My awesome app</title>
<link rel="shortcut icon"
@sconstantinides
sconstantinides / csscomb.json
Last active May 8, 2018 22:56
automatic update by http://atom.io/packages/sync-settings
{
"always-semicolon": true,
"color-case": "upper",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "single",
"sort-order": [
@sconstantinides
sconstantinides / .bash_profile
Last active April 2, 2020 15:42
Simple bash profile
[[ -s "$HOME/.profile" ]] && source "$HOME/.profile"
parse_git_branch() {
git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/'
}
export PS1="\w\$(parse_git_branch) $ "
export EDITOR="atom -w"
export PATH=/usr/local/bin:$PATH