Steve Kinney stevekinney

Electron, v3

Repositories

Please clone and install the dependencies for the following respositories:

SSR solves a lot of problems for our users, but can be tricky for our tests. Cypress waits until the window fires its load event, but when we're using SSR, our JavaScript might show up after our page officially loads.

For example, this test will fail:

describe.only('Ratings Filter with SSR', () => {
  beforeEach(() => {
    cy.visit('/secret-menu');
    cy.get('#minimum-rating-visibility').as('rating-filter');
 });

Resources: React && TypeScript

Slack channel: #tmp-react-typescript

The Basics

Okay, we're going to warm up by implementing a reducer in order to get everything up and running again.

We're going to implement the basic functionality.

const reducer = (state = [], action) => {
  return state;
};

An engineering manager that I have the privilege of working with just asked me for three expectations of a principal engineer for a project that he is working on to mentor senior engineers at Twilio. Here is the list that I came up with.

Skate to where the puck is going: Are you waiting to be told what to do or are you getting a sense for our product vision and making concrete suggestions for what technical work needs to be done to get us in a good place when it becomes time to execute?
Act like an owner: Are you complaining about what's broken or offering solutions and/or alternative ways of thinking that makes it clear to engineers close to the problem that they can play an important role in solving those problems? Do you accept the world as it is or are you willing to provide a compelling vision for how it could be?
Teach and lead: You're not getting more hours in the day. Taking on all of the hard work not only makes you a single point of failure, it robs your colleagues of the ability

	import { readFile } from 'fs/promises';

	import { parse, preprocess, walk } from 'svelte/compiler';

	import autoprefixer from 'autoprefixer';
	import type { AcceptedPlugin } from 'postcss';
	import sveltePreprocess from 'svelte-preprocess';
	import tailwind from 'tailwindcss';
	import nesting from 'tailwindcss/nesting';

	const colors = {
	primary: {
	'50': '#f0f0fd',
	'100': '#e4e4fb',
	'200': '#d0cff6',
	'300': '#b5b1f0',
	'400': '#9e92e7',
	'500': '#8d77dd',
	'600': '#7f5ecf',
	'700': '#6d4db5',

	{
	"printWidth": 80,
	"tabWidth": 2,
	"useTabs": false,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "all",
	"bracketSpacing": true,
	"jsxBracketSameLine": false,
	"fluid": false

	const logEnhancer = (createStore) => (reducer, initialState, enhancer) => {
	// Do stuff like wrap the reducer in a higher-order function.
	const reducerWithConsoleLogs = (previousState, action) => {
	const nextState = reducer(previousState, action);
	console.log({ action, previousState, nextState });
	return nextState;
	};

	return createStore(reducerWithConsoleLogs, initialState, enhancer);
	};

	/* HSL */
	$teal: hsla(180%, 78%, 62%, 1);
	$black: hsla(96%, 20%, 5%, 1);
	$pink: hsla(339%, 100%, 56%, 1);
	$yellow: hsla(61%, 100%, 54%, 1);
	$white: hsla(0%, 0%, 100%, 1);

	/* RGB */
	$teal: rgba(81, 234, 234, 1);
	$black: rgba(12, 15, 10, 1);