Jani Eväkallio jevakallio

TL;DR: If you want to see me perform a spoken word poem about JavaScript in front of 1000 people (and on video), please ⭐ star this gist. If you're on mobile, you'll need to request desktop site.

JavaScript Slam Poetry

Introduction

React Native makes it possible to make native iOS and Android mobile apps without needing to know any iOS or Android programming - just JavaScript!

In this course, we'll write a simple mobile app that you can run on your own phone and share with your friends!

Prerequisites

In order to take advantage this course, you should have the following experience.

componentDidSmoosh Code of Conduct

All guests, speakers, and volunteers at the componentDidSmoosh event are required to agree with the following code of conduct. Organizers will enforce this code throughout the event.

Because this is a comedy event, the tone and content of the presentations will differ from your usual tech event. Strong language, adult themes and dark humour may be presented. However, we the event organizers, are committed to providing a safe and inclusive space for our audience, and aim to create an environment of fun, love, kindness and respect for all our fellow human beings.

	//let's say you have these three AMD modules:

	//testmodule1.js
	define(function() {
	var val = { iAm:'testmodule1.js' };
	console.log(val);
	return val;
	});

	//testmodule2.js

	import React from 'react';

	const Item = React.createClass({
	render() {
	return <li>{this.props.value}</li>;
	}
	});

	const List = React.createClass({
	render() {

	import Exponent from 'exponent';
	import React from 'react';
	import { range } from 'lodash';

	import {
	StyleSheet,
	Dimensions,
	ScrollView,
	Animated,
	Text,

	// paste this to chrome console on anybody's twitter page
	// and it'll turn into an instant presentation :)

	(function TweetPresent() {
	const presenter = $(`<div id="tpd" style=" position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; padding: 10vh 10vw; box-sizing: border-box; background-color: white; font-size: 5vw; text-align: center; z-index: 9999; display: flex; align-items: center; justify-content: center;"></div>`);
	const tweets = $$(`div.tweet p.js-tweet-text`)
	.map(el => el.innerHTML)
	.map(t => ({t, s: Math.random()}))
	.sort((a, b) => a.s > b.s ? -1 : 1)
	.map(c => c.t);

	// @flow
	// https://twitter.com/jevakallio/status/941258932529614848

	import React, { Component, type Node } from 'react';
	import styled from 'styled-components/native';
	import Touchable from 'react-native-platform-touchable';
	import Carousel from 'react-native-snap-carousel';
	// $FlowFixMe
	import { LinearGradient } from 'expo';

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no"
	/>
	<meta name="theme-color" content="#000000" />

	import gql from 'fraql'
	import { ListRow } from './ListRow';

	// this is the whole list
	export const List = ({ users }) => (
	<ul>
	{users.map(user => <ListRow user={user} />)}
	</ul>
	)

Jani Eväkallio jevakallio

JavaScript Slam Poetry

Introduction

Prerequisites

componentDidSmoosh Code of Conduct

The Quick Version