Ben Centra bencentra

## frontend_guild_2.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                bencentra
                / frontend_guild_2.md
            
            
              Last active
              August 23, 2018 15:46
            
              
                Updated blog post draft
              
          
    Creating the "Frontend Guild"

I love working at Constant Contact. But like any engineering group, technology can easily lag over time, drift between teams, and generally become a hassle. This time last year I wanted to do something about it, specifically for frontend tooling since that's what I work with every day.

Your team trying to keep up with tech debt
Fast forward one year - I've been leading a group of fellow engineers that we call the Frontend Guild. Together we're making tech debt reduction and tooling improvements a full-time effort, not an afterthought. We still have a long way to go, but our work is already impacting teams across the company. Keeping up with changing technology is tough, but we're more ready for it than ever.

  
## frontend_guild.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                bencentra
                / frontend_guild.md
            
            
              Last active
              August 6, 2018 14:37
            
              
                Blog post draft about the Frontend Guild at Constant Contact
              
          
    Creating the "Frontend Guild"

I love working at Constant Contact. But like any engineering group, technology can easily lag over time, drift between teams, and generally become a hassle. This time last year I wanted to do something about it, specifically for front-end tooling (since that's what I work with every day).

Your team trying to keep up with tech debt
After talking with some fellow engineers, we identified some key issues:

How do we keep frontend tech up-to-date? We're not talking about hopping on the latest framework hotness. We mean tools and techniques that can simplify writing and shipping JavaScript - ES2015+, Babel, Webpack, modular code, etc.


## canvas.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <style>
    #canvas {
      border: 1px solid black;
    }
    </style>

## server.js
/*

This module creates an HTTPS web server and serves static content
from a specified directory on a specified port.

To generate a new cert:

  openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

To remove the passphrase requirement:

## .bash_profile
export CLICOLOR=1
export LSCOLORS=GxFxCxDxBxegedabagaced

# export PS1="\h:\W \u\$"
export PS1="[\u] \W $ "

# Git autocommlete
source ~/.git-completion.bash

# Setting PATH for Python 3.5

## drink-temp-alert.php
<?php

# Script for alerting drink admins if a machine is gonna freeze.
#
# Requires a WebDrink API key: https://webdrink.csh.rit.edu/#/settings
#
# Should be run as a cron job on san.csh.rit.edu:
# 	*/10 * * * * php /users/u18/bencentra/scripts/drink-temp-alert.php

$apiKey = "API_KEY_HERE";

## .editorconfig
# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8

## config.json
{
  "vars": {
    "@gray-base": "#000",
    "@gray-darker": "lighten(@gray-base, 13.5%)",
    "@gray-dark": "lighten(@gray-base, 20%)",
    "@gray": "lighten(@gray-base, 33.5%)",
    "@gray-light": "lighten(@gray-base, 46.7%)",
    "@gray-lighter": "lighten(@gray-base, 93.5%)",
    "@brand-primary": "darken(#428bca, 6.5%)",
    "@brand-success": "#5cb85c",

## underscore_basics.js
/*
*  Some basic Underscore.js methods
*/

var numbers = [1, 2, 2, 3, 5, 5, 8];
var moreNumbers = [3, 6, 7, 8, 9];
var people = [
  {name: "Ben", age: 22},
  {name: "Jim", age: 34},
  {name: "Sally", age: 16}

## batman.js
function batman(n) {
  var i = 0, s = "";
  while (i < n) {
    s += parseInt("batman");
    i++;
  }
  console.log(s+"BATMAN!");
}
batman(16);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Canvas</title>
	<style>
	#canvas {
	border: 1px solid black;
	}
	</style>
	/*

	This module creates an HTTPS web server and serves static content
	from a specified directory on a specified port.

	To generate a new cert:

	openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

	To remove the passphrase requirement:
	export CLICOLOR=1
	export LSCOLORS=GxFxCxDxBxegedabagaced

	# export PS1="\h:\W \u\$"
	export PS1="[\u] \W $ "

	# Git autocommlete
	source ~/.git-completion.bash

	# Setting PATH for Python 3.5
	<?php

	# Script for alerting drink admins if a machine is gonna freeze.
	#
	# Requires a WebDrink API key: https://webdrink.csh.rit.edu/#/settings
	#
	# Should be run as a cron job on san.csh.rit.edu:
	# /10 * * * php /users/u18/bencentra/scripts/drink-temp-alert.php

	$apiKey = "API_KEY_HERE";
	# EditorConfig is awesome: http://EditorConfig.org

	# top-most EditorConfig file
	root = true

	# Unix-style newlines with a newline ending every file
	[*]
	end_of_line = lf
	insert_final_newline = true
	charset = utf-8
	{
	"vars": {
	"@gray-base": "#000",
	"@gray-darker": "lighten(@gray-base, 13.5%)",
	"@gray-dark": "lighten(@gray-base, 20%)",
	"@gray": "lighten(@gray-base, 33.5%)",
	"@gray-light": "lighten(@gray-base, 46.7%)",
	"@gray-lighter": "lighten(@gray-base, 93.5%)",
	"@brand-primary": "darken(#428bca, 6.5%)",
	"@brand-success": "#5cb85c",
	/*
	* Some basic Underscore.js methods
	*/

	var numbers = [1, 2, 2, 3, 5, 5, 8];
	var moreNumbers = [3, 6, 7, 8, 9];
	var people = [
	{name: "Ben", age: 22},
	{name: "Jim", age: 34},
	{name: "Sally", age: 16}
	function batman(n) {
	var i = 0, s = "";
	while (i < n) {
	s += parseInt("batman");
	i++;
	}
	console.log(s+"BATMAN!");
	}
	batman(16);