annielmenezes

Problem: What does a Modern Front-End Development Workflow Look Like?

I want to start writing libraries and large applications using the JavaScript language. However, I don't know how to setup the project and which build tools to use. What I do know is that the JavaScript community has moved way beyond using browser developer tool plugins and strategically-placed console.log() statements to debug, test, and build code.

I need help.

Below, I will keep track of articles, tutorials and tools I come across as I search for a way to bring my front-end development chops up-to-date.

The Ultimate Resource

annielmenezes

This is now an actual repo:

https://github.com/cowboy/jquery-tiny-pubsub

annielmenezes

[
    { "keys": ["ctrl+alt+up"], "command": "select_lines", "args": {"forward": false} },
    { "keys": ["ctrl+alt+down"], "command": "select_lines", "args": {"forward": true} },
]

annielmenezes

#!/bin/bash

# 1. Enable all software repositories
# It shall launch the dialog box for configuring software sources. 
# Go to the tab named "Other software" and check all boxes named "Canonical Partners" and "Independent".
software-properties-gtk

# 2. Update the system
apt-get update
apt-get upgrade

annielmenezes

What is your folder-structure preference for a large-scale Node.js project?

0: Starting from Rails

This is the reference point. All the other options are based off this.

|-- app
|   |-- controllers
|   |   |-- admin

annielmenezes

!!! 5
html(class='no-js')
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')

    title

    meta(name='description', content='')
    meta(name='viewport', content='width=device-width, initial-scale=1')

annielmenezes

{
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.3",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",

annielmenezes

/**
 * Documentation: http://docs.azk.io/Azkfile.js
 */
// Adds the systems that shape your system
systems({
  wordpress: {
    // Dependent systems
    depends: ["mysql"],
    // More images:  http://images.azk.io
    image: {"docker": "azukiapp/php-fpm"},

annielmenezes

/**
 * Simple authentication and authorization example with passport, node_acl,
 *  MongoDB and expressjs
 *
 * The example shown here uses local userdata and sessions to remember a
 *  logged in user. Roles are persistent all the way and applied to user
 *  after logging in.
 *
 * Usage:
 *  1. Start this as server

annielmenezes

const { readdirSync, statSync } = require("fs");
const { dirname, join } = require("path");

// Usage:
// const walkSync = require("walk-dir-sync");
// console.log(walkSync(path));
// return a matrix of files path
// [ [path, path], [path, path] ]

const walkSync = d =>