DEV Community: Daniel Deutsch

2 easy ways to get data from Unsplash.com in React

Daniel Deutsch — Sun, 08 Oct 2017 08:38:52 +0000

Since Unsplash.com released their API and I just love their content, I decided to write a short article on how to use it with React. Unsplash is awesome! :) Enjoy.

âž¡ï¸ Github Repo is available here â¬…ï¸

"Everything negative - pressure, challenges - is all an opportunity for me to rise." - Kobe Bryant

Set up the basics

To set up the basics, I use the code base from another project I did, using:

create-react-app
React components that basically render images in a list

Fetch data with the fetch API

use the fetch API like:

componentDidMount() {
    fetch('https://api.unsplash.com/photos/?client_id=' + cred.APP_ID)
        .then(res => res.json())
        .then(data => {
            this.setState({ imgs: data });
        })
        .catch(err => {
            console.log('Error happened during fetching!', err);
        });
}

use componentDidMount lifecycle when fetching data (DOM is represented)
describe a fetch method using Promise functionality
transform the call into a JSON object and pass it into state
after that, simply render out each image from the fetched link

âž¡ï¸ See the Github Repo after those steps â¬…ï¸

Fetch data using a library

Fetching can also be accomplished by one of many libraries. I will use axios, since it provides cool features like:

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

So the next steps are:

add the axios package
simply adapt the fetch method to the methods from the axios package

componentDidMount() {
    axios
        .get('https://api.unsplash.com/photos/?client_id=' + cred.APP_ID)
        .then(data => {
            this.setState({ imgs: data.data });
        })
        .catch(err => {
            console.log('Error happened during fetching!', err);
        });
}

Very easy and works well:)

âž¡ï¸ See the Github Repo after those steps â¬…ï¸

Looks like this:

Add search feature

adapt your fetched link (add query and search parameters)
make your request dynamic, connecting the search query to your app
add a searchbar component
make sure to bind all methods (use the arrow functions or bind them manually)

performSearch = query => {
  axios
    .get(
      `https://api.unsplash.com/search/photos/?page=1&per_page=10&query=${query}&client_id=${cred.APP_ID}`
    )
    .then(data => {
      this.setState({ imgs: data.data.results });
    })
    .catch(err => {
      console.log('Error happened during fetching!', err);
    });
};

Polish up React code

use the ref-attribute for the input

this.props.onSearch(this.query.value);
---
ref={input => (this.query = input)}

set a default for your performSearch method and put the performSearch into the componentDidMount lifecycle
render out a different component when no images can be found with an if statement
use conditional rendering to render a paragraph when the fetch is not finished (setting a flag to the state and changing it in the fetch method)

<div className="main-content">
    {this.state.loadingState
        ? <p>Loading</p>
        : <ImgList data={this.state.imgs} />}
</div>

âž¡ï¸ See the Github Repo after those steps â¬…ï¸

â That was incredible easy and already shows how much you can do with the API :)

Adapt to Unsplash guidelines

When using an API always, ALWAYS, make sure to read their guidelines.
âž¡ï¸ Unsplash API guidelines

So as an example here, I didn't credit Unsplash or the photographer. Therefore I have to improve my app by retrieving more information from the data and adding credits to the owners:

const Img = props =>
    <li>
        <a href={props.link}>
            <img src={props.url} alt="Unsplash Image here" />
        </a>
        <p>
            Photo by
            <a href={props.user}>{props.name}</a>
            <a href={props.link}> See on Unsplash</a>
        </p>
    </li>;

Now it looks like

âž¡ï¸ See the finished app on Github â¬…ï¸

Useful links & credits

Unsplash.com
I did a treehouse course, that covers an app with a similar approach:

If you gained something from this article let me know with a comment or heart. Make sure to follow for more :)

Rate Questions with React and Redux - A baby example ðŸ‘¶

Daniel Deutsch — Sun, 08 Oct 2017 08:37:54 +0000

Rate Questions with React and Redux - A baby example ðŸ‘¶

https://unsplash.com/photos/s0XDLfhyN34

I will build a small application for simply rating questions. This is designed as an exercise project for React and Redux, since I am still not understanding it.

âž¡ï¸ Github Repo is available here â¬…ï¸

ðŸ“„ Table of contents

Motivation for this article
Modularizing the base
Adding Redux
- Action Types
- Reducers
- Actions and Action Creators
- Create the Redux Store
- Connect the container to the store
Add another component in the Redux App
Implement ducks
Chrome Redux DevTools

"Everything is practice." - Pele

Motivation for this article

Another small application to understand Redux and React. It feels like it's the 100th app trying to grasp Redux. But 1 month without Redux and you start at basically nothing again. I am like: "Yeah I have heard about that" - and that's it. Action, Action Creators, Reducers, Dispatch, blabla. Too many things to understand :D So once again â†—ï¸

Modularizing the base

Structure the components in order to fit perfectly into a Redux application.

âž¡ï¸ Codebase on Github â¬…ï¸

the stopwatch component has it's own local state is not dependent on other components
the stats and counter components are dependent on other components
the AddQuestionForm is dependent on other components and also contains logical information
the header and question components

Modularizing helps to

isolate responsibilities, which means easier testing and debugging
better scale the app and easier for the use of Redux
better organize between teams

âž¡ï¸ Modularized Code on Github â¬…ï¸

Adding Redux

Action Types

Decide which components should take part in the Redux store.
-> In this application only the questions have to be made available to all components.

Find what events happen in your application for this specific state. -> In this application it is

changing the score
adding questions
removing questions

Reducers

Reducers are pure functions, that change state according to the action type.

The reducer function provides different switch statements on how change the state. (Make sure to never change the state itself! It should be a pure function! #immutability)

For example:

export default function Player(state = initialState, action) {
  switch (action.type) {
    case QuestionActionTypes.ADD_PLAYER:
      return [
        ...state,
        {
          name: action.name,
          score: 0,
        },
      ];
    case QuestionActionTypes.REMOVE_QUESTION:
      return [...state.slice(0, action.index), ...state.sclice(action.index + 1)];
    case QuestionActionTypes.UPDATE_QUESTION_SCORE:
      return state.map((question, index) => {
        if (index === action.index) {
          return {
            ...question,
            score: question.score + question.score,
          };
        }
        return question;
      });
    default:
      return state;
  }
}

Actions and Action Creators

Submiting an action to Redux

action creators generate an action (action = an event that will result in a change in state)
action is dispatched to the Redux store
a reducer passes the action to a component and returns the new state

For example for adding a question:

export const addQuestion = name => ({
  type: QuestionActionTypes.ADD_QUESTION,
  name,
});

Create the Redux Store

Create a store in your index.js passing it the main reducer and wrap it around your scoreboard component in order to provide the store to the whole application.

Connect the container to the store

use mapStateToProps to assign the state to a prop value -> assign the state of the questions as props
for automatically dispatching actions, that are created use:

const {dispatch, questions} = this.props;
const addQuestion = bindActionCreators(QuestionActionCreators.addQuestion, dispatch);
const removeQuestion = bindActionCreators(QuestionActionCreators.removeQuestion, dispatch);
const updateQuestionScore = bindActionCreators(QuestionActionCreators.updateQuestionScore, dispatch);

update the event handlers on the components accordingly (counter, question and scoreboard components)
the header and stopwatch components don't need changes, because they do not participate in the Redux cycle

Add another component in the Redux App

Now we want to display details to each question

add a new action type (select a question)
extend the reducer with a new switch case and additional state
add a new action creator for selecting a question
create a new bindActionCreator in the scoreboard component
update mapStateToProps with the selected question index
create a QuestionDetail component to display details
update the event handler on the question component

âž¡ï¸ See the commit with the implementation of the detail component on Github â¬…ï¸

Implement ducks

For smaller apps the ducks concept can help to develop a Redux application faster. Basically instead of keeping everything modular (actions, reducers, actionCreators), we can also keep them in one file to have a better overview.

This file looks like:

// Actions
const ADD_QUESTION = 'question/ADD_QUESTION';
const REMOVE_QUESTION = 'question/REMOVE_QUESTION';
const UPDATE_QUESTION_SCORE = 'question/UPDATE_QUESTION_SCORE';
const SELECT_QUESTION = 'question/SELECT_QUESTION';

// Reducers
const initialState = {
  questions: [
    {
      name: 'Do you like AI?',
      score: 31,
      created: '00:00',
      updated: '00:00',
    },
    {
      name: 'Do you like Engineering?',
      score: 20,
      created: '00:00',
      updated: '00:00',
    },
    {
      name: 'How many Redux Apps?',
      score: 50,
      created: '00:00',
      updated: '00:00',
    },
  ],
  selectedQuestionIndex: -1,
};

export default function Question(state = initialState, action) {
  const date = `${new Date().getHours()}:00`;
  switch (action.type) {
    case ADD_QUESTION:
      const addQuestionList = [
        ...state.questions,
        {
          name: action.name,
          score: 0,
          created: date,
        },
      ];
      return {
        ...state,
        questions: addQuestionList,
      };
    case REMOVE_QUESTION:
      const removeQuestionList = [
        ...state.questions.slice(0, action.index),
        ...state.questions.slice(action.index + 1),
      ];
      return {
        ...state,
        questions: removeQuestionList,
      };
    case UPDATE_QUESTION_SCORE:
      const updateQuestionList = state.questions.map((question, index) => {
        if (index === action.index) {
          return {
            ...question,
            score: question.score + action.score,
            updated: date,
          };
        }
        return question;
      });
      return {
        ...state,
        questions: updateQuestionList,
      };
    case SELECT_QUESTION:
      return {
        ...state,
        selectedQuestionIndex: action.index,
      };
    default:
      return state;
  }
}

// ActionCreators
export const addQuestion = name => ({
  type: ADD_QUESTION,
  name,
});
export const removeQuestion = index => ({
  type: REMOVE_QUESTION,
  index,
});
export const updateQuestionScore = (index, score) => ({
  type: UPDATE_QUESTION_SCORE,
  index,
  score,
});
export const selectQuestion = index => ({
  type: SELECT_QUESTION,
  index,
});

âž¡ï¸ See the commit with the implementation of ducks on Github â¬…ï¸

Chrome Redux DevTools

Download the Redux DevTools Extension
add the necessary line of code to your store

const store = createStore(
    QuestionReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

The DevTools help to develop and debug your Redux app. Check out this article for more.

âž¡ï¸ Result on Github â¬…ï¸

If you gained something from this article let me know with a comment or heart. Make sure to follow for more :)

Reduce your time clicking elements on the web

Daniel Deutsch — Sun, 08 Oct 2017 08:37:11 +0000

Reduce your time clicking elements on the web

https://unsplash.com/photos/7nsqPSnYCoY by Aziz Acharki

Since I am an organizer of a meetup (FCC Vienna) in need to spend time on their platform meetup.com. I think their website could use an update in terms of user experience, but I really like the functionality and concept. However, one thing that really bothers me are the limited options to regulate your email notification settings. In the today's fast moving world I don't have time to click hundreds of checkboxes just in order to be safe from SPAM, so I found a faster solution using JavaScript.

ðŸ“„ Table of contents

Using the power of JavaScript on the web
- The problem
- The solution
- If a developer of meetup.com is reading this
Useful links & credits

"The less effort, the faster and more powerful you will be." - Bruce Lee

Using the power of JavaScript on the web

The fact that all webpages are or can be controlled by JavaScript provides additional opportunities for those who are capable of using it in the console.

The problem

In order to change the email notification settings for each meetup you have to click on each meetup and the uncheck each of those boxes. When I am now a member of many groups I have to go through the process many times, which offends me in some way since my time is very valueable.

So to solve that task programmatically, I identify the checkbox element in the chrome inspector:

After that I am using the document.querySelector to grab those elements and store it in an array:

[...document.querySelectorAll('.icon-s')]

The solution

Now use .foreach on the array and click each item.

[...document.querySelectorAll(".icon-s")].forEach(box=> { box.click(); })

ðŸš€ That's how fast and easy you can solve that problem

These 3 lines of code save you a lot of time when you have to click many times. Be sure to use your powerful knowledge of JavaScript in your day-to-day work. ðŸ˜ƒ

If a developer of meetup.com is reading this

please adapt the UX of the homepage. Thanks a lot :D

Useful links & credits

If you gained something from this article let me know with a comment or heart. Make sure to follow for more :)

Automate email settings with JavaScript

Daniel Deutsch — Sun, 08 Oct 2017 08:36:31 +0000

Automate email settings with JavaScript

https://unsplash.com/photos/Ya3FqJdKVaw Photo by Samuele Errico Piccarini

In my previous article I described how to use JavaScript in the browser console to get tedious tasks on the web much faster done. Of course this approach is limited. A way to go much further and beyond is to use a automation framework like Selenium. In this article I show how flexible and fast you can program a script that helps you save a lot of time.

âž¡ï¸ Github Repo is available here â¬…ï¸

ðŸ“„ Table of contents

The problem
How to automate with Selenium webdriver
Using it on clicking SPAM checkboxes on meetup.com
- Setup
- Going to the settings
- Identify the elements and iterate over them
See the result in Youtube

"The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency." - Bill Gates

The problem

The Meetup.com page requires me to check on/off each checkbox for an email notification of each group.

I don't waste my time clicking through all my groups. Meetup.com offers an option to disable all notifications, but I want to receive updates from some selected groups.
Another thing is that they have "Reminders", that require even more clicking with a dropdown menu. This dropdown menu can't even be handled by the console code, that I have shown in the previous article.

Therefore I decided to write an automated script that does all that for me.

How to automate with Selenium webdriver

Selenium allows to use a webdriver to go through the browser and performs actions, that a human being could also do (like clicking on elements).

The process of automating is simple:

find the element with the inspector in your browser
get the element with driver.findElement
perform actions on that element with .then (promises in JS) or functions from the framework like .click()
after performing the tasks, be sure to driver.quit(); to end the driver

Using it on clicking SPAM checkboxes on meetup.com

Setup

In this example I am using the Selenium webdriver.

The setup in Node.js is pretty easy:

var webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

var driver = new webdriver.Builder().forBrowser('chrome').build();
driver.manage().window().maximize();

Going to the settings

To get to the notifications section I simply go to their login page, send my credentials to log in and click all the way to the settings.

driver.get('https://secure.meetup.com/login/');

var mail = driver.findElement(webdriver.By.id('email'));
var pass = driver.findElement(webdriver.By.id('password'));

mail.sendKeys(cred.cred.user);
pass.sendKeys(cred.cred.pass);

driver.findElement(webdriver.By.name('submitButton')).click();
driver
    .findElement(
        webdriver.By.className(
            'valign--middle display--none atMedium_display--inline'
        )
    )
    .click();
driver.findElement(webdriver.By.xpath('//a[text()="Settings"]')).click();
driver.findElement(webdriver.By.xpath('//a[text()="Email Updates"]')).click();

Identify the elements and iterate over them

I identify all checkboxes and dropdowns and call a function (clickingAll) on each element.

const list = driver.findElements(
    webdriver.By.xpath('//li[@class="list-item"]/a')
);

list.then(function(elements) {
    var links = elements.map(elem => {
        return elem.getAttribute('href');
    });
    promise.all(links).then(linkRefs => {
        linkRefs.forEach(element => {
            driver.navigate().to(element);
            clickingAll();
        });
    });
});

The clickingAll() function actually clicks the elements and tests if the boxes are already unchecked (since we don't want to simply click everything, but rather uncheck all boxes).

var clickingAll = () => {
    driver
        .findElements(
            webdriver.By.xpath('//i[@class="icon-s icon-checkbox pseudocheckbox "]')
        )
        .then(elements => {
            elements.map(elem => {
                elem.getAttribute('aria-checked').then(check => {
                    if (check === 'true') {
                        elem.click();
                    }
                });
            });
        });
    driver
        .findElement(webdriver.By.xpath('//select[@class="j-selectbox"]'))
        .click();
    driver
        .findElement(webdriver.By.xpath('//option[@value="NO_RECEIVE"]'))
        .click();

    try {
        driver
            .findElement(webdriver.By.xpath('//option[@value="OFF]'))
            .then(null, err => {
                if (err) {
                    return false;
                }
            })
            .click();
    } catch (e) {
        return false;
    }
    driver.navigate().back();
};

See the result on Youtube

If you gained something from this article let me know with a comment or heart. Make sure to follow for more :)

Fetching Github with React and Redux

Daniel Deutsch — Sun, 08 Oct 2017 08:35:50 +0000

Photo by Osman Rana on Unsplash

As with everything in life only practice makes you good in a certain field. Therefore I decided to create another application using React and Redux. This time I wanted to focus on asynchronous action flow with Redux, which is a little different from the synchronous dispatching process.

âž¡ï¸ Github Repo is available here â¬…ï¸

“Think Big And Don’t Listen To People Who Tell You It Can’t Be Done. Life’s Too Short To Think Small. - Tim Ferriss

What I am going to build

I am going to build a simple app, that fetches repositories from Github by typing the name of the Github user:

The building process

To quickstart the the configuration I used the React Slingshot boilerplate by Cory House. It provides nice linting and feedback during the whole building process.

First I started out with defining basic React Components. I used the provided structure and adapted it for a home page and an about page.
For jumping across routes I also used the provided React Router features because it's simple and fast.

The next step was adding some basic styling. I wanted to use Material-UI but quickly realized that I have to dive into the framework. After some minutes with bugs, I decided to stay with MaterializeCSS, which I used in the past. It provides great documentation and simple CSS components. It's the CSS framework I enjoy working with the most.

The Redux process

After that I wired up a basic Redux flow, providing a store, actions and a reducer. One way when working async in Redux is to use redux-thunk. I have choosen this way because it's fast and reliable. (I didn't want to tackle Redux-Saga, since I need more knowledge on Promises)

From redux-thunk's docs:

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

That's the whole magic. Returning a function instead an action. It allows to wait for an answer after a http call (or whatever call) and dispatching the action after receiving the data.

The code looked like:

//Action
import axios from 'axios';
import * as types from './actionTypes';

export function loadReposSuccess(repos) {
    return {
        type: types.LOAD_REPOS_SUCCESS,
        repos
    };
}

export function loadRepos() {
    return function(dispatch) {
        return axios
            .get('https://api.github.com/users/DDCreationStudios/repos')
            .then(repos => {
                dispatch(loadReposSuccess(repos.data));
                console.warn(repos.data);
            })
            .catch(err => {
                throw err;
            });
    };
}

//index.js
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import 'materialize-css/dist/css/materialize.min.css';
import { Provider } from 'react-redux';

import routes from './routes';
import configureStore from './store/configureStore';
import { loadRepos } from './actions/reposAction';

const store = configureStore();
store.dispatch(loadRepos());

render(
    <Provider store={store}>
        <Router history={browserHistory} routes={routes} />
    </Provider>,
    document.getElementById('app')
);

//reducer
import * as types from '../actions/actionTypes';

export default function reposReducer(state = [], action) {
    switch (action.type) {
        case types.LOAD_REPOS_SUCCESS: {
            return action.repos;
        }
        default:
            return state;
    }
}

On a side note: I used axios because I initially thought I would create a bigger app. A simple "fetch" method would have been sufficient as well. :)

Building the search feature with Redux

This was a little bit more complicated, since I needed to make the fetch depended on another user action. But that's why Redux is so great.

The key thing was to regulate the flow with the store in the index.js, because I wanted to subscribe to the store and only dispatch an action when a certain change in state has occured. I found the "handleChange" helper function as solution:

//index.js
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import 'materialize-css/dist/css/materialize.min.css';
import { Provider } from 'react-redux';

import routes from './routes';
import configureStore from './store/configureStore';
import { loadRepos } from './actions/reposAction';

let currentValue;
function handleChange() {
    let previousValue = currentValue;
    currentValue = store.getState().user;

    if (previousValue !== currentValue) {
        store.dispatch(loadRepos(store.getState().user));
    }
}

const store = configureStore();
store.dispatch(loadRepos(store.getState().user));
store.subscribe(handleChange);

render(
    <Provider store={store}>
        <Router history={browserHistory} routes={routes} />
    </Provider>,
    document.getElementById('app')
);

Now the fetching of data was called only when the state of user changed in the store. Heureka!

Then I adapted the other files accordingly:

//reducer index.js

import { combineReducers } from 'redux';

import repos from './reposReducer';
import user from './userReducer';

const rootReducer = combineReducers({
    repos,
    user
});

export default rootReducer;

//initialState.js
export default {
    repos: [],
    user: 'DDCreationStudios'
};

//updated repo reducer
import * as types from '../actions/actionTypes';
import initialState from './initialState';

export default function reposReducer(state = initialState.repos, action) {
    switch (action.type) {
        case types.LOAD_REPOS_SUCCESS: {
            return action.repos;
        }
        default:
            return state;
    }

//user reducer
import * as types from '../actions/actionTypes';
import initialState from './initialState';

export default function userReducer(state = initialState.user, action) {
    switch (action.type) {
        case types.LOAD_USER_SUCCESS: {
            return action.user;
        }
        default:
            return state;
    }
}

//user action
import axios from 'axios';
import * as types from './actionTypes';

export function loadUser(user) {
    return {
        type: types.LOAD_USER_SUCCESS,
        user
    };
}

//updated repo action
import axios from 'axios';
import * as types from './actionTypes';

export function loadReposSuccess(repos) {
    return {
        type: types.LOAD_REPOS_SUCCESS,
        repos
    };
}

export function loadRepos(user) {
    return function(dispatch) {
        return axios
            .get(`https://api.github.com/users/${user}/repos`)
            .then(repos => {
                dispatch(loadReposSuccess(repos.data));
                console.log("receiving following data: "+repos.data);
            })
            .catch(err => {
                throw err;
            });
    };
}

//actionTypes
export const LOAD_REPOS_SUCCESS = 'LOAD_REPOS_SUCCESS';
export const LOAD_USER_SUCCESS = 'LOAD_USER_SUCCESS';

And that's it!

Wire up the corresponding container component, in this case the "HomePage", and and it works great:

// HomePage.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import * as userActions from '../../actions/userAction';
import Repo from './Repo';
import Searchbar from './Searchbar';

class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            user: ""
        };
        this.updateSearch = this.updateSearch.bind(this);
        this.saveSearch = this.saveSearch.bind(this);
    }

    updateSearch(e) {
        let user = e.target.value;
        return this.setState({ user: user });
    }

    saveSearch(e) {
        e.preventDefault();
        this.props.actions.loadUser(this.state.user);
    }

    repoRow(repo, index) {
        return (
            <div key={index}>
                <Repo key={repo.id} repo={repo} />
            </div>
        );
    }

    render() {
        return (
            <div className="container">
                <Searchbar
                    user={this.state.user}
                    onChange={this.updateSearch}
                    onSave={this.saveSearch}
                />
                {this.props.repos.map(this.repoRow)}
            </div>
        );
    }
}

HomePage.propTypes = {
    repos: PropTypes.array.isRequired,
    user: PropTypes.string.isRequired,
    actions: PropTypes.object.isRequired
};

function mapStateToProps(state) {
    return {
        repos: state.repos,
        user: state.user
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(userActions, dispatch),
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

Result

Check out my Github Repo to see the other files as well. Be sure to understand basic React to utilize the power Redux in my example.

Also see a timelapse of the whole project on Youtube. According to WakaTime I spent 13 hours on the codebase and the whole recording was over 1 hour long. :)

If you gained something from this article let me know with a comment or heart. Make sure to follow for more :)

Publishing an organization homepage on Github Pages

Daniel Deutsch — Sat, 30 Sep 2017 09:51:54 +0000

Publishing an organization homepage on Github Pages

âž¡ï¸ Github Repo is available here â¬…ï¸

I am organizing a local group meetup of FreeCodeCamp called FreeCodeCamp Vienna. Months ago we decided to create a simple homepage to represent the group and it's progress online, but we never seemed to find the time to do it. Following the idea "better a quick homepage than no homepage at all" I decided to create one and publish it on Github Pages. Not only does it allow us to host our static page, but also serves as a perfect example for how easy something can be published online.

ðŸ“„ Table of contents

Name your repository
Build your Homepage
Put your Code on Github
Set the source for your Github Pages
See your amazing homepage at the provided link
See the result for FreeCodeCamp Vienna
See the building process on Youtube

"Opportunities Don’t Come Knocking On The Door. They Present Themselves When You Knock The Door Down!" – Greg Plitt

Name your repository

When publishing to Github Pages choosing the right repository name is crucial.

This page from Github explains it perfectly:

Therefore you need to name the repository exactly like the organization with ".github.io" at the end.

Build your Homepage

After creating the repository build your homepage with HTML, CSS and Javascript.

Tip: I was using codepen during development. It is REPL and allows you to receive instant feedback from the code you are writing.

In order to speed up the layout process and add cool features I was using Materializecss. I have used it in the past and always had been happy with the results.

Put your Code on Github

Next, put your files on Github follwing the instructions.

Be sure to have the files on your "Master" branch

And choose the source of your Github Pages for the master branch.

Organization pages need the source files in the Master branch according to Github.

Set the source for your Github Pages

Your settings should look like this:

See your amazing homepage at the provided link

Follow the provided link or type your organization name with ".github.io" in the URL bar.

See the result for FreeCodeCamp Vienna

https://fccvienna.github.io/

See the building process on Youtube

Thanks for reading my article! Feel free to leave any feedback!

Basic JavaScript AI Algorithm

Daniel Deutsch — Sat, 30 Sep 2017 09:51:05 +0000

âž¡ï¸ Github Repo is available here â¬…ï¸

AI and machine learning was number 1 on my list when I started to code. Now I am facing the problem that there are so many resources to dive into the topic. My goal is clear: I want to implement the basics of machine learning with JavaScript - so I did.

“Human beings, viewed as behaving systems, are quite simple. The apparent complexity of our behavior over time is largely a reflection of the complexity of the environment in which we find ourselves.”

â€• Herbert A. Simon, The Sciences of the Artificial

Resources

In this article I am simply going to build something similiar to that from Burak Kanber's article "Machine Learning: Introduction to Genetic Algorithms"

In his article he not only explains fundamentals very well but also uses his knowledge in a JavaScript example.
I was very enlighted and amazed.
Visit his homepage for more great stuff. :)

What we are building

We are programing an algorithm in Javascript that reproduces the word "JavaScript".

This is an example for understanding basic concepts. It is very basic and even contrived, since the algorithm itself contains the desired outcome (the typed word).

Reducing possible outcome

There are many possible outcomes for building the desired string. Assuming a certain length for the solution, like 10 characters long, will reduce the amount of candidates.

For example:

- JavsScrip!
- Javahztrew
- WerdScript
- JavaScript

These would all be possible candidates for a solution regarding their length, but obviously only the last one is correct.

Cost function

A cost function helps us to minimize the cost (the difference to the desired outcome).

Quoting the article:

For each character in the string, figure out the difference in ASCII representation between the candidate character and the target character, and then square it so that the "cost" is always positive.

For example, if we have a capital "A" (ASCII 65) but it's supposed to be a capital "C" (ASCII 67), then our cost for that character is 4 (67 - 65 = 2, and 2^2 = 4).

To get to our desired goal to reproduce the string we are aiming for a cost of 0.

In this basic example it is safe to assume that the algorithm can be stopped after it had reached the cost of 0. Be aware that other, more complex problems might need to run a certain time and evaluate their own minimized result.

Comparing results

Next we need to combine and compare the results.

For example:

- SavaScript
- JavaScripd

can be cut in half and afterwards combining one string with the other like:

- SavaScripd
- JavaScript

The result now shows one correct string and one that is not.

Changing candidates

In order to avoid in-breeding we need to alter the candidates after combining.

For example:

- JadaScript
- JadaScript

This situation will never yield improving results, since they are the candidates are exactely the same.

We need to alter at least one of them a little to evolve.
For example "JaeaScript" would fit well to continue a successful evolution.

Summarizing the candidates

Thinking in object oriented programming we can lay out the following:

We have a candidate class with

the string
cost score

as property and

combining
altering
calculating the cost score

as methods.

Building a group

We will choose a group size and evolve the candidates inside.
The group has to experience different stages. In those stages we need to

calculate the cost score for each candidate
sort the candidates by the score
removing unfit candidates
altering the best candidates
altering candidates randomly
a completness test to check if the correct string is found

Code

First we set a class with a string as constructor and set a method for building a random string:

var Candidates = function(code) {
    if (code) this.code = code;
    this.cost = 9999;
};
Candidates.prototype.code = '';
Candidates.prototype.random = function(length) {
    while (length--) {
        this.code += String.fromCharCode(Math.floor(Math.random() * 255));
    }
};

Next we need to add the cost function, which finds the differences between the ASCII code and squares them.

Candidates.prototype.calcCost = function(compareTo) {
    var total = 0;
    for (i = 0; i < this.code.length; i++) {
        total +=
            (this.code.charCodeAt(i) - compareTo.charCodeAt(i)) *
            (this.code.charCodeAt(i) - compareTo.charCodeAt(i));
    }
    this.cost = total;
};

After that we build the combine function, which takes a candidate as an argument, finds the middle and returns an array of two new children.

Candidates.prototype.combine = function(cand) {
    var pivot = Math.round(this.code.length / 2) - 1;

    var child1 = this.code.substr(0, pivot) + cand.code.substr(pivot);
    var child2 = cand.code.substr(0, pivot) + this.code.substr(pivot);

    return [new Candidates(child1), new Candidates(child2)];
};

Next we need to alter a chracter from the string. Therefore we pick a random position in the string and randomly increase the character by 1 or -1. Afterwards we replace the old string with the new string.

Candidates.prototype.mutate = function(chance) {
    if (Math.random() > chance) return;

    var index = Math.floor(Math.random() * this.code.length);
    var upOrDown = Math.random() <= 0.5 ? -1 : 1;
    var newChar = String.fromCharCode(this.code.charCodeAt(index) + upOrDown);
    var newString = '';
    for (i = 0; i < this.code.length; i++) {
        if (i == index) newString += newChar;
        else newString += this.code[i];
    }

    this.code = newString;
};

Next we need to build a group of candidates. The class constractor takes the target string and the size of the group as arguments and fills it with random candidates.

var Group = function(goal, size) {
    this.members = [];
    this.goal = goal;
    this.stageNumber = 0;
    while (size--) {
        var gene = new Candidates();
        gene.random(this.goal.length);
        this.members.push(gene);
    }
};

After that we need to sort the Candidates by their cost score.

Group.prototype.sort = function() {
    this.members.sort(function(a, b) {
        return a.cost - b.cost;
    });
};

Then we need to write a simple display function to actually build some HTML on the page. Basically we want to display the stage we are in and all the current candidates of the group.

Group.prototype.display = function() {
    document.body.innerHTML = '';
    document.body.innerHTML += '<h2>Stage: ' + this.stageNumber + '</h2>';
    document.body.innerHTML += '<ul>';
    for (var i = 0; i < this.members.length; i++) {
        document.body.innerHTML +=
            '<li>' + this.members[i].code + ' (' + this.members[i].cost + ')';
    }
    document.body.innerHTML += '</ul>';
};

The next step is to actually create a stage. Therefore we calculate the costs, sort the candidates, display the result, combine the best results and mutate the result. Then repeat the cycle. We set the break with an if-statement when the string of member equals our goal.

Group.prototype.stage = function() {
    for (var i = 0; i < this.members.length; i++) {
        this.members[i].calcCost(this.goal);
    }

    this.sort();
    this.display();
    var children = this.members[0].combine(this.members[1]);
    this.members.splice(this.members.length - 2, 2, children[0], children[1]);

    for (var i = 0; i < this.members.length; i++) {
        this.members[i].mutate(0.5);
        this.members[i].calcCost(this.goal);
        if (this.members[i].code == this.goal) {
            this.sort();
            this.display();
            return true;
        }
    }
    this.stageNumber++;
    var scope = this;
    setTimeout(function() {
        scope.stage();
    }, 20);
};

Last thing we have to do is to form a new group with the desired goal of the string and the size of the group as arguments. Then call the stage function and kickstart the calculations.

var population = new Group('JavaScript', 25);
population.stage();

Recap

As you can see I wasn't changing much in the code. Simply because I think it's straight forward and understandable. The whole algorithm gets his concept across and offers a great entry into some basics of machine learning.

In case of any questions, feel free to ask!

See the result on Codepen

Useful links & credits

ðŸ“„ "Machine Learning: Introduction to Genetic Algorithms"

Thanks for reading my article! Feel free to leave any feedback!

Learnings from my first full-stack app in JavaScript

Daniel Deutsch — Sat, 30 Sep 2017 09:50:07 +0000

Learnings from my first full-stack app in JavaScript

Photo by Hugo Sousa on Unsplash

The FreeCodeCamp Curriculum qualifies the voting app as an advanced backend challenge. However I didn't really understand that qualification, since all user stories are pointing to a full stack app. Here are some of my findings when tackling this app. These can be especially revealing for coding beginners, who are on the same path.

âž¡ï¸ Github Repo is available here â¬…ï¸

ðŸ“„ Table of contents

A little background
Some data
- Numbers
- Putting it into perspective
General and motivational takeaways
Code beginner takeaways
Links

“Tell me and I forget, teach me and I may remember, involve me and I learn.” - Ben Franklin

A little background

Seeing the achieved certificates at the FreeCodeCamp about page, I understood that the backend certificate must be hard to accomplish.

In short, this curriculum (and it will be renewed in near future) requires for the first advanced backend challenge practically a full stack app.

I completely started from zero, so this was a real challenge. That's why I also decided to track a little bit and describe some things for other students that encounter the same frustrations on this challenge that I did.

Some data

Before describing my key learnings I want to provide some data.

I gathered the data with WakaTime, which can easily be integrated in your editor and tracks your time you spend on Repos.

Unfortunately I have discovered it pretty late, in May actually, which leads to a very undertracked result.

Looking on Github I was already starting with that project in December 2016.

So keep in mind that even the data I am showing doesn't come close to my real efforts!

Numbers

I was spending around 120 hours on this app.
Most of it (13hours) was spent creating the routes file. Basically implementing the REST API.
Second place with 12 hours spent, was the NewPoll.js file for the frontend. This was due to the efforts integrating a new poll in the React & Redux eco system, which brings me to the 3rd place.
With 12 hours on the ducks for Redux. The ducks file contains most code related to Redux, ie. ActionCreators, Actions, Reducers. Immutable state and asynchronous actions cost so much time to understand and implement correctly.

See the WakaTime results yourself.

Again, especially for beginners of interest, my overall time spent coding from May till now (mid August):

I spent somewhere around 240 hours coding in that timeframe
most of it in JavaScript
most of it using Visual Studio Code
on an average of 2 hours per day

Putting it into perspective

Remember that this is only a very small scope of my efforts.

This is on Github.
Tracked too late with WakaTime.
Just tracking time in the editor actually coding.

Alone from the Github Repo you can see, that I have easily spent more than 200 hours on this application. Here you also have to take into account that I was learning a lot on the way - so I actually was improving a lot and becoming much faster with the time.

I was also doing other tutorials and projects, watching videos and writing articles on the side to understand concepts better.

General and motivational takeaways

Maybe this sounds a lot to you, maybe it sounds not much for you. Doesn't matter. Key thing here is to see how things can be quantified in the development area.

Spending more than 250 hours coding (+ side projects and code at work) in 4 months leads to approximately 60 hours per month and to 15 hours per week.

So when you want to embark on this journey and you see people spending months on projects, keep those numbers in mind.

See what it takes to progress in an area you had no idea or knowledge of. These underestimated 15 hours are equal to a part time job. So if you think that progress is slow and poor, realize what it takes.

I am no genius, but certainly not dumb. (At least according to some tests :D)

See that consistency is everything.
You can't do a project like this on one weekend. Make yourself aware how long the journey is. Realize that it is hard and remind yourself where you are going. Constantly!

Code beginner takeaways

Analyzing the app a little bit in depth you will realize it is pretty unfinished. I myself have opened issues and see many things to improve.

Now why is that?

For me, each project has it's own key learnings. In this project it was the connection of frontend and backend and using Redux in React. To keep my eyes on the learning path I force myself to tackle the next app. Reuse the things I have learned and be able to see new problems in a different light.

Continuing this app and powering it up with more features, more functionality and tests would take a lot of time but diminish my learning results.
It's open source and always available. If I want to continue my work I can do it easily.

Understanding Machine Learning

Daniel Deutsch — Sat, 30 Sep 2017 09:47:57 +0000

Photo by Denys Nevozhai on Unsplash

This is short overview of machine learning. What it is, what learning is and what it's most common concepts are. It is designed as a first step into the topic.

"A wise man can learn more from a foolish question than a fool can learn from a wise answer." - Bruce Lee

What is Machine Learning (ML)

ML finds patterns in data and uses them to predict the future.

Learning requires:

identifying patterns
recognizing those patterns

Now it's easy to find patterns. But it is not easy to find patterns that are correct. Increasing the size of data allows to predict outcome that is more and more correct.

Data	Algorithm	Model	Application
contains patterns	finds patterns	recognizes patterns	uses to recognition on other data

By Megajuice - Own work, CC0, Link

Common programming languages used for ML are:

R
Python

The learning process

1. Asking questions

what questions to ask
what data helps you to answer the question
how do you measure success

2. Iterate

select and prepare your data over and over to make it useable for the algorithm
apply an algorithm on the data and create models over and over to increase your success rate
expose and test successful models to different data

ML concepts

supervised learning (the value you want to predict is already in the data)
unsupervised learning (the value you want to predict is not in the data)

Data preprocessing with supervised learning

Raw data has to be transformed in to training data by removing unnecessary items like duplicates, wrong/false information, useless information.

The training data contains features, which stand for important classifications and target values, which stand for the desired piece of information for the model.

Problems

	regressions	classification	clustering
Goal	trying to find a line or curve that fit the data	trying to group data into classes	trying to identify segments of the data
Example
Image Credit	By Sewaqu - Own work, Public Domain, Link	By Elizabeth Goodspeed - Own work, CC BY-SA 4.0, Link	By Chire - Own work, CC BY-SA 3.0, Link

Algorithms

Common styles are:

decision trees (construct a model based on actual values of attributes in a data)

By Stephen Milborrow - Own work, CC BY-SA 3.0, Link

neural networks (construct a model based on the recombination and reevaluation of results within the training data)

By Glosser.ca - Own work, Derivative of File:Artificial neural network.svg, CC BY-SA 3.0, Link

bayesian (filters according to probabilistic classifiers)

By AnAj - Own work (Original text: self-made), Public Domain, Link

K-means (construct a model based on vector quantization to the k closest training examples)

By Chire - Own work, Public Domain, Link

(Iris flower data set, clustered using k means (left) and true species in the data set (right). Note that k-means is non-determinicstic, so results vary. Cluster means are visualized using larger, semi-transparent markers. The visualization was generated using ELKI.)

Training the model

find features that are relevant to identifying the target value
put a significant percentage of the features data into the algorithm
generate a model
test the model with the remaining percentage of the features data by comparing the target values with the values form the actual data
if the model is not accurate, change the features, change the algorithm or change the data

By Docurbs - Own work, CC BY-SA 4.0, Link

Thanks for reading my article! Feel free to leave any feedback!

Introducing TypeScript (with a section on JSX)

Daniel Deutsch — Sat, 30 Sep 2017 09:40:32 +0000

Photo by å¼ å¦æ¬¢ on Unsplash

Since I am getting more and more advanced, it was time to take a look into Typescript. Not because of the simple linting of JavaScript code, but rather because of the static typing concept. This article provides an introduction.

In order to provide a certain standard of quality I mostly refer to and quote the following sources:

The Github repository and wiki of Microsoft (Licensed under Apache License 2.0)
TypeScript DeepDive Gitbook by Basarat Ali Syed and it's contributors (Licensed under Creative Commons 4.0)

"Lack of documentation is becoming a problem for acceptance." - Wietse Venema

What is it and where is it heading?

The idea behind TypeScript is to provide an optional type system for JavaScript.

It enhances code quality by

increase your agility when doing refactoring. It's better for the compiler to catch errors than to have things fail at runtime.
types are one of the best forms of documentation you can have. The function signature is a theorem and the function body is the proof.

Your JavaScript code .js file can be renamed to a .ts file and TypeScript will still give you back valid .js equivalent to the original JavaScript file. TypeScript is intentionally and strictly a superset of JavaScript with optional Type checking.

It's goals (according to the official documentation) are:

Statically identify constructs that are likely to be errors.
Provide a structuring mechanism for larger pieces of code.
Impose no runtime overhead on emitted programs.
Emit clean, idiomatic, recognizable JavaScript code.
Produce a language that is composable and easy to reason about.
Align with current and future ECMAScript proposals.
Preserve runtime behavior of all JavaScript code.
Avoid adding expression-level syntax.
Use a consistent, fully erasable, structural type system.
Be a cross-platform development tool.
Do not cause substantial breaking changes from TypeScript 1.0.

Concepts

Essentially TypeScript is linting JavaScript. Just doing a better job at it than other linters that don't have type information.

Basics Types

Types are annotated using :TypeAnnotation syntax. (For example var num: number = 123;)

Boolean (let isDone: boolean = false;)
Number (let decimal: number = 6;)
String (let color: string = "blue";)
Array (let list: number[] = [1, 2, 3]; or let list: Array<number> = [1, 2, 3];)
Tuple (let x: [string, number]; x = ["hello", 10];)
Enum (enum Color {Red, Green, Blue} let c: Color = Color.Green;)
Any (opt-out of type-checking and let some values pass through compile-time checks)
Void (the absence of having any type at all)
Null / Undefined (are subtypes of all other types. That means you can assign null and undefined to something like number)
Never (is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns)

Interfaces

Interfaces are the core way in TypeScript to compose multiple type annotations into a single named annotation.

interface Name {
    first: string;
    second: string;
}

var name: Name;
name = {
    first: 'John',
    second: 'Doe'
};

Generics

In languages like C# and Java, one of the main tools in the toolbox for creating reusable components is generics, that is, being able to create a component that can work over a variety of types rather than a single one.

Without generics:

function identity(arg: number): number {
    return arg;
}

While using any is certainly generic in that will accept any and all types for the type of arg, we actually are losing the information about what that type was when the function returns.

With generics:

function identity<T>(arg: T): T {
    return arg;
}

T allows us to capture the type the user provides (e.g. number), so that we can use that information later.

Intersections

extend is a pattern in JavaScript where you take two objects and create a new one that has the features of both these objects.

Intersections allow to define those objects.

function extend<T, U>(first: T, second: U): T & U {
    let result = <T & U> {};
//some code
    return result;
}

React and JSX

Setup

Files that contain JSX have to end with .tsx instead of only .ts to be transpiled correctly.

Depending on the project setup you can enable three JSX modes: preserve, react, and react-native.

Concepts

React can either render HTML tags (strings) or React components (classes). The JavaScript emit for these elements is different (React.createElement('div') vs. React.createElement(MyComponent)). The way this is determined is by the case of the first letter. foo is treated as an HTML tag and Foo is treated as a component.

The fact that React renders strings or classes is essential for TypeScript.

In order to understand type checking with JSX, you must first understand the difference between intrinsic elements and value-based elements. Given a JSX expression <expr />, expr may either refer to something intrinsic to the environment (e.g. a div or span in a DOM environment) or to a custom component that you've created.

Intrinsic elements can be checked with interfaces, like

declare namespace JSX {
    interface IntrinsicElements {
        foo: any
    }
}

<foo />; // ok
<bar />; // error

Whereas value based elements are identified in their own scope, like

import MyComponent from "./myComponent";

<MyComponent />; // ok
<SomeOtherComponent />; // error

Therefore,

Components are type checked based on the props property of the component.

For example:

interface Props {
  foo: string;
}
class MyComponent extends React.Component<Props, {}> {
    render() {
        return <span>{this.props.foo}</span>
    }
}

<MyComponent foo="bar" />

Checking on attribute types on intrinsic elements is:

declare namespace JSX {
  interface IntrinsicElements {
    foo: { bar?: boolean }
  }
}

// element attributes type for 'foo' is '{bar?: boolean}'
<foo bar />;

Whereas attributes on value based elements are checked like:

declare namespace JSX {
  interface ElementAttributesProperty {
    props; // specify the property name to use
  }
}

class MyComponent {
  // specify the property on the element instance type
  props: {
    foo?: string;
  }
}

// element attributes type for 'MyComponent' is '{foo?: string}'
<MyComponent foo="bar" />

Thanks for reading my article! Feel free to leave any feedback!