Fad. fadlystwn

Deploy Rails Application to AWS EC2

Creating AWS EC2 Instance

- login to 'AWS Management Console' (https://aws.amazon.com/console/)
- from 'Services'(in navbar) choose 'EC2'
- from 'Create Instance' section, click on 'Launch Instance'
- then select 'AMI' (Amazon Machine Image), we will be using 'Ubuntu Server 16.04 LTS (HVM)' as example
- select 'Instance Type' as per your requirement
- then click 'Next:Configure Instance Details' to continue
  change 'Configure Instance Details' or used as default settings

Node.js Deployment

Steps to deploy a Node.js app to DigitalOcean using PM2, NGINX as a reverse proxy and an SSL from LetsEncrypt

1. Sign up for Digital Ocean

If you use the referal link below, you get $10 free (1 or 2 months) https://m.do.co/c/5424d440c63a

2. Create a droplet and log in via ssh

I will be using the root user, but would suggest creating a new user

Mobile Safari's 100% Height Dilemma

Whether you're developing a web application with native-ish UI, or just a simple modal popup overlay that covers the viewport, when it comes to making things work on iDevices in Mobile Safari, you're in for a decent amount of pain and suffering. Making something "100% height" is not as easy as it seems.

This post is a collection of Mobile Safari's gotchas and quirks on that topic, some with solutions and fixes, some without, in good parts pulled from various sources across the internets, to have it all in one place. Things discussed here apply to iOS8, iOS9 and iOS10.

The Disappearing Browser Chrome

Screen real estate on smartphones is limited, so Mobile Safari collapses the browser chrome (address bar and optional tab bar at the top, and tool bar at the bottom) when the user scrolls down. When you want to make something span exactly the height of the viewport, or pin something to the bottom of the screen, this can get tricky because the viewport changes size (or

Ruby on Rails Cheatsheet

Architecture

Create a new application

Install the Rails gem if you haven't done so before

UI component names

As front-end developers we all know the pain of coming up with meaningful component names for CSS classes. I created this gist as a place to collect terms that are suitable as user interface component names.

Please contribute your own ideas!

Interactive components

button

	import React, { useState, useEffect } from 'react'
	import PropTypes from 'prop-types'
	import { checkIsAuthenticated, authSignUp, authLogin, authLogout } from '../../services/auth'

	export const AuthContext = React.createContext({})

	export default function Auth({ children }) {

	const [isAuthenticated, setIsAuthenticated] = useState(false)
	const [isLoading, setIsLoading] = useState(true)

	var debug = process.env.NODE_ENV !== "production";
	var webpack = require('webpack');

	module.exports = {
	context: __dirname,
	devtool: debug ? "inline-sourcemap" : null,
	entry: "./js/scripts.js",
	output: {
	path: __dirname + "/js",
	filename: "scripts.min.js"