Skip to content

Latest commit

 

History

History
138 lines (108 loc) · 3.45 KB

worklog.md

File metadata and controls

138 lines (108 loc) · 3.45 KB
Raw

Filtrify Photo

An awesome-simple photo filtering app built with Vue.js and Vuex.

You can check out the full Filtrify Photo Series over on YouTube.

Project: Filtrify Photo
Dev Area: Frontend / Backend
Author: Sean Becker
Entity: RabbitWerks JavaScript

Livestream Todo

Ep. 01

  • Series introduction
  • Initialize Vue project
  • Pull in Flexbox Util library
  • Pull in Vuex for later State management
  • Build the Main App layout
  • Talk about the main components of the app
  • Talk about Cloudinary option for images

Ep. 02

  • Finish Control Panel Layout
    • Build Image Loader Component
    • Build Filter Panel Component
  • Build Display Image Component
  • Switch to CSS Variables for Style Colors
  • EventBus setup for temp demo
  • Use RabbitWerks Flexbox Utility Library!

Ep. 03

  • Build Filter Input Component
    • Write Logic for filters
    • Register as Component in FilterPanel
  • Set Up CSS Variables for Filters
  • Start on Vuex Store for State
    • Talk about Vuex State Management

Ep. 04

  • Vuex Methods for Filter Inputs
    • Update State
    • Update CSS Variables
      • In Component?
  • -Build Canvas Component- [out-of-time]

Ep. 05

  • Build Canvas Component
  • Refactoring Vuex Store to use ES6 Destructuring
  • Bounce Canvas to DataURI Function
    • Set size based on Image size

Ep. 06 RabbitWerks Discord Universe

  • Refactoring Vuex Store to use ES6 Destructuring
  • RabbitWerks Flexbox Utility Playground sneak peak

Ep. 07

  • Fix bugs
    • fix "GRAYSCALE" spelling mistake in Vuex Filters
    • rewrite display-image component
      • set $ref for Vue to target
      • build filterString and pass as v-bind style
        • computed property for filters
        • build filterString inside
    • move away from css variables for filters
  • Set Cross Origin to Anonymous [remember.remember.the.5th.of.november]
  • Set dynamic styling of filters
  • clean up design
    • Vue filter the filter names
    • Add min-height to image-loader component

Ep. 08

  • Download Image Button component
    • Custom Name for Downloaded Image

Ep. 09

  • Custom Google Font
  • Overflow Scroll on Filters Panel :)
  • Display Filter Values

Ep. 10

  • Download Logic
    • Update getImageSize Fn
  • Reset Filters Button component
  • Reset Filter Double Click Event
  • Custom File Name input

Ep. 11

  • PNG or JPG option
    • Build Component
    • V-Model Select
  • Display original Image dimensions
  • Deploy to Netlify
  • Clean up code
    • update comments
    • remove console logs
    • remove EventBus

Ep. 12

  • CORS-Adder Backend
    • Node / Express webserver
    • Adding CORS headers to requests
    • URL handling
    • Error handling
  • Deploy to Now.sh
    • Update frontend with deployed backend url
    • Test agains known cors issue images
  • Refactor backend

Ep. 13

  • RM eventbus
  • RM console logs
  • RM display container watchers
  • RF capitalize filter
  • Finish destructuring vuex store

SPRINT

  • Routerify our App
    • Pull in Vue-Router
    • Refactor Navlinks as Router Links
    • Code Splash / Landing Page
  • user alert message
    • invalid src message
    • error bouncing message