maciejmatu

/*
 * Creating new Objects
 * https://developer.mozilla.org/pl/docs/Web/JavaScript/Guide/Working_with_Objects
 */
let myObj = new Object();
let myObj = {}; // preffered method
let myObj = Object.create(Prototype, {name: 'Foo'});

/**
 * Adding properties

maciejmatu

// Singly Linked List data structure implementation 
// in javascript. (not all methods)

class SinglyListNode {
	constructor(data) {
		this.data = data;
		this.next = null;
	}
}

maciejmatu

import styled from 'styled-components';

const HeaderText = styled.h1`
  font-size: ${ props => props.large ? 32 : 24 }px;
  color: wheat;
  text-transform: uppercase;
`;

export default () => (
  <HeaderText large>Looks Cool</HeaderText>

maciejmatu

import './HeaderText.scss';

export default ({ 
  large,
  children,
  className,
  ...props
}) => {
  const classList = `header__text ${large && 'header__text--large'} ${className}`;
  

maciejmatu

.header__text {
  font-size: 24px;
  color: wheat;
  text-transform: uppercase;
  
  &--large {
    font-size: 32px;
  }
}

maciejmatu

const log = (...args) => console.log(...args);

log('This', 'is', 'useless');
// 'This', 'is', 'useless'

const name = 'Bob';
log`Hi ${name}! How are you?`;
// ['Hi ', '! How are you?'], 'Bob'

maciejmatu

const Button = styled.button`
  font-size: 12px;
  background-color: ${props => props.solid ? 'red' : 'blue' };
`;

maciejmatu

(
  [ 'font-size: 12px ;background-color: ', ';' ], // first argument
  (props => props.solid ? 'red' : 'blue')
)

maciejmatu

'font-size: 12px; background-color: ' + 'red' + ';'

maciejmatu

// component props mock
const properties = {
  color: 'red',
  large: true
};

// curried function
const styled = (props) => (strings, ...args) => {
  return strings.map((string, i) => {
    const correspondingItem = args[i];