Categories
react.js

React.js: the basics

Boiler plating:
npx create-react-app my-app

Basic element creation:

ReactDOM.render(React.createElement('h1', null, 'Hello world!'),document.getElementById('content'))

The first argument, the element
The second: the data to be feed to that element
The third, the innerHTML inside that element

ReactDOM.render does the actual appending to the page



React Hooks
Example (look ma' no classes!):

const GeneralStats = () => {

useEffect(() => {
     // fetch your data or whatever you did on react before hooks here, useEffect is similar to componentdidmount
});

    return (
        <div className="Home">
            Please wait, loading ... 
        </div>
    );

}


export default GeneralStats;

Categories
redshift

Redshift: alter table column TYPE is not allowed

Only allowed for varchar column types.

The trick to get it done:

ALTER TABLE sometable ADD COLUMN some_new_column (with the new definition you want)
UPDATE sometable SET some_new_column = old_column;
ALTER TABLE sometable DROP COLUMN old_column;
ALTER TABLE sometable RENAME COLUMN some_new_column TO old_column;

The catch: column order will be altered (the new column will be the last now

If you use copy to fill out that table, you can’t reorder columns to make it fit still

If that is your setup, instead of create a new column, create a new table with the right TYPE, and do as above

Categories
firebase

firebase setup

Basic startup command

npm install -g firebase-tools

firebase login

firebase init (make sure you click the space bar to select an option, otherwise your firebase.json file will be empty)

create an index.html page in that dir

in the firebase console, click on the “add firebase to your web app” button, and put your javascript code into the index.html page

alternatively, if you choose the “firebase host” option, and choose the default options, you will have a public/index.html file with the needed boilerplate to start

App structure

Add the following to index.html:

<script defer src=”app.js”></script>

the attribute defer just so it is in sync with all the other scripts

Inside app.js, the code to include if you want to sign up via the oath authorization built in functionality:

var provider = new firebase.auth.GoogleAuthProvider();

const btnLogin = document.getElementById('btnLogin');

// add login event

btnLogout.addEventListener('click', e => {

        firebase.auth().signOut().then(function(){

                user = null;

                // log user out:

                console.log('User log out ');

        }).catch(function(error){

                var errorCode = error.code;

                var errorMessage = error.message;

                console.log('Error: ' + errorCode + ' -- ' + errorMessage);

        });

});

btnLogin.addEventListener('click', e => {

        firebase.auth().signInWithPopup(provider).then(function(result){

                user = result.user;

                // log user into

                console.log('our logging user: ' + JSON.stringify(user));

        }).catch(function(error){

                var errorCode = error.code;

                var errorMessage = error.message;

                console.log('Error: ' + errorCode + ' -- ' + errorMessage);

        });

});

Testing your code locally

To start the server locally, run the following command:

firebase serve –host 0.0.0.0 –port 8080

if you try the login button at this point, you will get an error in the console.log, you need to add the domain shown in that error to the list of authorized domains, in the “Authentication / Sign-in Method” section of the dashboard.

 

 

 

 

Categories
AWS

AWS lambda: the basics

For a API Gate / Lambda combo, there is a bit of a gotch when setting those two services together and following their hello world example.

Instead of the default in their example:

# print(“value2 = ” + event[‘key2’])

use:

event[‘params’][‘querystring’][‘key1’]

I wish it was more evident in their documentation what “event” means, but basically, after you set the above, you need to also set the query params (spell out what they will be) under: Amazon API Gateway / Resources / Method execution

Also, in that section, Integration Request, specify:

When there are no templates defined (recommended)”

and add a new template for: “application/json”

In the “Generate Template” section, choose: “Method Request Pass through”

Leave the default code in there, and now, when you pass your parameters as:

your-api-gateway-url?yourparam=yourvalue

you will see those values in your python script as:

event[‘params’][‘querystring’][‘yourparam’]

Categories
Atom

Atom: the basics

cmd-shift-P opens the search command

Categories
Docker

boot2docker error “Error response from daemon: client and server don’t have same version”

The fix:

boot2docker stop

boot2docker download

boot2docker up

Categories
Docker

Docker: the basics

Dockerfile: series of commands used to create an image. Below is an explanation of some of the basic commands you can use inside:

# an existing docker image that contains some of the functionality you need (like node.js, or java drop wizard, etc):

FROM some_img_name

MAINTAINER your name <your@email.com>

# any commands you need to run as part of your image build (each run will create an image that is cacheable)

RUN apt-get update

RUN some other command

# notice how we are passing -y to avoid the y/n question at install time:

RUN apt-get install -y some_package

# example of creating a config file via echo, also, this command will make your docker image available to any external connections:

RUN echo “bind_ip = 0.0.0.0” >> /etc/mongodb.conf

# Including files from our local host into the image:

ADD some_local_file_path some_path_inside_docker_img

# important! this is how you expose ports from inside the image:

EXPOSE 27017

# this command run after the image start (it is the default, can be overwritten in the command line)

CMD some_command_here

ENTRYPOINT could be used instead of CMD, the difference is that ENTRYPOINT will always execute, whereas CMD can be overwritten by the arguments passed in the command line

Once your Dockerfile is ready, you are ready to build your image:

docker build -t your_docker_namespace/some_tag:latest .

The . indicates you want to use the local folder to run your build. This will execute each command in that Dockerfile at build time.

What build does is to run the local Dockerfile instructions into a machine, marked with the tag name provided (some_tag:latest ), so you can run it locally afterwards.

Once you build successfully, you are ready to push to the docker hub repo, so you can download and use this new image from anywhere:

docker tag your_new_img_tag your_dockerhub_namespace/your_img_name

docker push your_new_img_tag your_dockerhub_namespace/your_img_name

# pulling images from the docker hub to your local env:

docker pull postgres:latest

you will notice how several “things” are downloaded. This is because images are comprised of several sets of layers, some of those shareable between images. The idea is to be able to cache and reuse better.

By default, you are pulling from the dockerhub repo.

# running docker images:

(remember to build first, if you want to version the run locally)

docker run docker_img_name /path/to/command command_args

Example:

docker run –name dockerimgname -it -v /src:/somedirinsideimg/src -p 9000:9000

# running the ubuntu image locally, and then interact with it (-it) by opening a bash session to it:

docker run -it ubuntu /bin/bash

# exposing ports in a running docker container:

docker run -d -p 8000:80 –name some_name atbaker/nginx-example

Notes: option -d is so we run in detach mode (in the background). For the ports, it takes port 80 in the docker container, and makes it accessible in port 8000 in the host machine. The –name option is to avoid the default name docker gives to the running images (you can pass any string to it). To get the actual ip address you need to hit on your machine (in the browser, for example), you need to run:

docker-machine ls

So the actual url you will be looking at (for the example above) would be something like:

192.168.99.100:8000

# tailing logs on a running docker container:

docker logs -f some_name

# see what has changed on a docker container since we started it:

docker diff some_name

# check the history of commands run to produce a docker image:

docker history docker_img_name

# inspect low level information about our container:

docker inspect some_name

# get the top command applied to our docker image:

docker stats some_name

# remove all docker running images:

docker rm –force `docker ps -qa`

# creating new docker images:

pull and run a base docker image as instructed above, and then go ahead and go inside the image:

docker run -it image_name_here bash

inside the image, do whatever modifications you need to do for the base image, then you can commit your changes as follows:

docker commit -m “Some description of the changes here” docker_id_here docker_tag_here

the docker tag at the end is just any descriptor of your new image version. To push the changes to dockerhub you need to login first, and then push:

docker login

docker tag docker_tag_here your_dockerhub_namespace/name_of_docker_repository

docker push your_dockerhub_namespace/name_of_docker_repository

Mounting external volumes inside docker images

-v [hostpath]:[containerpath]

Example:

docker run \
    -ti -v `pwd`/testdir:/root \
    ubuntu /bin/bash

we are running an image, and attaching whatever folder we are at the moment (via pwd), plus /testdir, to go inside the root folder in the docker image

so whatever files we create inside that image, they will also be created in the root directory.

Example of how to persist data between stops and starts of a docker image:

docker run -it --name somedockerimgname -v /root ubuntu /bin/bash

so now, when you stop and restart somedockerimgname, the files you created inside the /root folder will still be there. Destroying the container will still remove the data though!

A very simple example of running a local node.js based app via a docker file:

FROM node:latest
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app/
RUN npm install
COPY . /usr/src/app
EXPOSE 3000
CMD [ “npm”, “start” ]

FROM takes the latest node image

RUN makes a dir inside that image

WORKDIR makes that dir the current directory

COPY copies your local files into the image

EXPOSE tells what ports will be open

CMD tells what will run afterwards all is well

docker-compose.yml

a wrapper for docker commands, and also so it is easier to keep all dockers running services in one place / file

Sample of a simple docker-compose.yml setup:

version: "2"
services:
  app:
    container_name: some_app_name_here
    build: .
    ports:
      - "3000:3000"
    links:
      - mongodb
  mongodb:
    container_name: mongo
    image: mongo
    volumes:
      - ./data:/data/db
    ports:
      - "27017:27017"

links will tell where to connect to the other related services

volumes are the local mounted data on the services

notice the dot in the “build:” part, that tells docker where to look for that Dockerfile with instructions on what to do for this service (in this case the local directory)

note: in developer mode, you may want to mount your node app directory, instead of copy / add, so when you make changes, you don’t have to restart manually:

volumes:
– .:/usr/src/app

Differences between docker and Vagrant

Vagrant is meant to spawn and manage entire Virtual Machines. Docker is more a series of files and executables packed in the image, so when programs run, they are directed to that set of files. When initialized, we are not booting a full fledge VM, just the set of files needed to run as one.

Docker’s goal is to run the fewest services per image, so you may need multiple to run your app.

The advantage of docker is that it gives you more flexibility, as you can swap services as modules easier. Also, it require less resources than running full blown Virtual Machines.

Docker also has its own internal network service. You can control the ports that the outside world uses to communicate with your image.

Categories
Heroku Rails

Rails 4.1: deploying to Heroku

download the toolbelt kit:

$ wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh

login:

$ heroku login

create your app:

$ heroku apps:create [your app name]

or, if you already have an app in Heroku:

heroku git:remote -a ticketee-demo

Add the rails_12factor gem, to take care of the standard points a web app should cover. In your gemfile:

gem “rails_12factor”, group: :production

Also, in the same gemfile, to make sure you are using the same Ruby version as in development, add the following line (right under the “source” first line):

source 'https://rubygems.org'
ruby "2.2.1"

Also, to specify a better production server (than the redbrick default), add the following line at the bottom of your gemfile:

gem "puma", group: :production

If you are going to use the Puma server in production, in Heroku, you will also need to add a Procfile in your root folder, with the following content:

web: bundle exec puma -t 5:5 -p ${PORT:-3000}
  -e ${RACK_ENV:-development}

Then, just rebuild your gemfile.lock by running:

bundle install --without=production

And finally, to push to Heroku, checking your code, and push it:

$ git add .
$ git commit -am "setup heroku ruby version and server"
$ git push heroku master

Your code is now there, but you will also need to get the database ready and run all the needed migrations:

heroku run rake db:migrate

If you have any seed files for your db, this is also a good time to run it:

heroku run rake db:seed

If anything goes wrong, you can always see what is happening in the logs:

heroku logs
Categories
bootstrap Rails

rails 4.1: styling an app with bootstrap and font-awesome

Install the bootstrap gem:

gem "bootstrap-sass", "~> 3.3"
gem "font-awesome-rails", "~> 4.3"

Rename app/assets/stylesheets/application.css to application.css.scss, so you an add @import statements to it

Replace the entire content of the file with:

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome";

Once you do this, you will need to also import the particular stylesheets your app is compose of, example (importing projects.scss:

@import "projects";

At this point you have the bootstrap css already applied to your pages. It is recommended you apply at least this div wrapper to your app/views/layouts/application.html.erb file:

<body>

  <div class="container">
  <% flash.each do |key, message| %>
    <div><%= message %></div>
  <% end %>

  <%= yield %>
</div>

</body>

An example of a styled link with bootstrap:

<%= link_to “New Project”, new_project_path, class: “new” %>

And the CSS (inside application.css.scss):

a.new {
  @extend .btn;
  @extend .btn-success;

  &:before {
    font-family: "FontAwesome";
    @extend .fa-plus;
    padding-right: 0.5em;
  }
}

This is an example on how to create a decent looking action buttons:

<ul class="actions">
  <li><%= link_to "Edit Project", edit_project_path(@project),
    class: "edit" %></li>

  <li><%= link_to "Delete Project", project_path(@project),
     method: :delete,
     data: { confirm: "Are you sure you want to delete this project?" },
     class: "delete" %></li>
</ul>

And the associated css:

a.edit {
  @extend .btn;
  @extend .btn-primary;

  &:before {
    font-family: "FontAwesome";
    @extend .fa-pencil;
    padding-right: 0.5em;
  }
}

a.delete {
  @extend .btn;
  @extend .btn-danger;

  &:before {
    font-family: "FontAwesome";
    @extend .fa-trash;
    padding-right: 0.5em;
  }
}

This is an example of how to style your alert messages (in application.html.erb):

<% flash.each do |key, message| %>
  <div class="alert alert-<%= key %>">
    <%= message %>
  </div>
<% end %>

And the CSS associated with it:

.alert-notice {
  @extend .alert-success;
}

.alert-alert {
  @extend .alert-danger;
}

Example of how to add a top nav bar:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <%= link_to "Ticketee", root_path, class: "navbar-brand" %>
      <button type="button" class="navbar-toggle collapsed"
        data-toggle="collapse" data-target="#collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="collapse">
      <ul class="nav navbar-nav">
        <li class="<%= "active" if current_page?("/") %>">
          <%= link_to "Home", root_path %>
        </li>
      </ul>
    </div>
  </div>
</nav>

And the CSS associated with it:

body {
  padding-top: 70px;
}

If you end up using the nav bar code above, you are going to need a bit of javascript to make the menu work on mobile platforms (otherwise the menu won’t open). Make sure to include this line in your app/assets/javascripts/application.js file:

//= require bootstrap-sprockets

Making your app responsive

Include the following inside your application.html.erb <head> tags:

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, create a dedicated stylesheet file to include your responsive styles (assets/stylesheets/responsive.scss), and import it:

@import "responsive";

Inside there, you can place all your scss related to media queries:

@media(max-width: 500px) {
  p { color: red }
}
Categories
Rails

rails 4.1 helpers

helpers are methods inside your app/helpers folder, and they are available to your views usage. Every controller gets one (if the controller gets created via a generator).

Example of an application helper:

module ApplicationHelper
  def title(*parts)
    unless parts.empty?
      content_for :title do
        (parts << "Ticketee").join(" - ")
      end
    end
  end
end

The * means any argument passed will be available as an array

This particular helper can be called via this example code (in your application.html.erb template):

<title>
  <% if content_for?(:title) %>
    <%= yield(:title) %>
  <% else %>
    Ticketee
  <% end %>
</title>

And, the particular pages or sub-templates that call this:

<% title(@project.name, "Projects") %>