siakaramalegos

Resources on Professionalism

This list was prepared for a class on professionalism in software engineering taught at Loyola University, New Orleans. The topics were communication, credibility, sexual harassment, and discrimination.

• How to Handle Difficult Conversations at Work, Harvard Business Review
• 14 Ways To Approach Conflict And Difficult Conversations At Work, Forbes Coaches Counsel
• Frequently Asked Questions About Sexual Harassment, Allred, Maroko & Goldberg
• 'Privilege is invisible to those who have it': engaging men in workplace equality, The Guardian
• [Project Implicit](https://implicit.har

siakaramalegos

# Lightning Fast React Apps

## Slides
If you attended my talk, and want to find the slides, you can check them out [here](https://speakerdeck.com/siakaramalegos/lightning-fast-react-apps). Here are all the extra resources I shared in that presentation:

## Resources

### Slide resources and extra reading

Resouces linked in presented slides, but not in the resource list slide.

siakaramalegos

const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const faviconsPath = path.resolve(__dirname, 'app/favicons/');
// ...

const commonConfig = merge([{
  context: path.resolve(__dirname, 'app'),
  entry: {
    index: './javascripts/index.js',
    base: './javascripts/base.js',
  },

siakaramalegos

// webpack.config.js HTML loader snippet
{
  test: /\.html$/,
  exclude: [nodeModulesPath],
  use: [
    { loader: 'file-loader', options: { name: '[name].[ext]' } },
    'extract-loader',
    { loader: 'html-loader', options: { minimize: true } },
  ]
}

siakaramalegos

// favicons.js
// Require all files in the favicon directory
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context(
  '../../favicons/',
  true, 
  /\.(png|xml|ico|json)$/)
);

siakaramalegos

// webpack.config.js favicon file loading snippet
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const faviconsPath = path.resolve(__dirname, 'app/favicons/');
// ... 

const commonConfig = merge([{
  // ...
  module: {
    rules: [
      // Favicons - just pass through to root using same file name

siakaramalegos

  <!-- Favicons -->
  <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">

siakaramalegos

Performance Matters

The slides from my talk are here on SpeakerDeck.

Want to check out some cool links and resources too? Here you go:

• The need for mobile speed: How mobile latency impacts publisher revenue report by DoubleClick by Google
• Webpack build analysis on SurviveJS by Juho Vepsäläinen
• https://www.webpagetest.org/easy easy no configuration set up for a slow-3G connection and mid-level phone, specifically Chrome on a Motorola G (gen 4) tested from Dulles, Virginia on a 400 Kbps 3G connection with 400ms of latency.
• Responsive Images by Pete LePage

siakaramalegos

import React, { Component } from 'react';
import { CardElement } from 'react-stripe-elements';
import isEmpty from 'lodash/isEmpty';

class CreditCardInput extends Component {
  constructor() {
    super()
    this.state = { error: undefined }
  }

siakaramalegos

class Timer extends Component {
  constructor(props) {
    super(props)
    // here, getTimeRemaining is a helper function that returns an 
    // object with { total, seconds, minutes, hours, days }
    this.state = { timeLeft: getTimeRemaining(props.expiresAt) }
  }

  // Wait until the component has mounted to start the animation frame
  componentDidMount() {