|[ Vue.js ]| Live Coding - Filtrify Photo Ep. 04

Описание: Welcome to the RabbitWerks JavaScript Live Coding Stream!
[ Filtrify Photo Ep. 04 ] [ Vue.js && Vuex ]

RabbitWerks Discord Universe
  / discord  

*STICKER GIVEAWAY ANNOUNCEMENT*
I will be giving away up to 25 packs of dev stickers when I reach:
100 Youtube Subscribers / 500 Instagram Followers
These stickers will feature the RabbitWerks logo on a black background, the RabbitWerks youtube art, Vue.js Logo and a surprise RabbitWerks Sitcker!

To obtain a Sticker Pack, head over to the RabbitWerks Discord Server [   / discord   ] join up, and enter your name in the GIVEAWAY channel!

Instagram Link:
  / rabbitwerks.js  


Continuing this series, we are building a simple photo filtering app that utilizes a few key concepts in order to make everything work. They are as follows:
4 Main Components
- - Image Loader
- - Filter Panel
- - Image Display
- - Rendering Canvas
Vuex for State Management
CSS Flexbox for Layout Design

**Project Repo:
https://github.com/Sharpie360/filtrif...

TIMELINE
==================
1:38 - Session Start
4:25 - Updating the Filters inside our State
12:10 - Coding the Action and Mutation to Update the Target Filter
27:42 - Starting on Updating the CSS Variables on Vuex State Change
29:00 *Track Highlight* Nefarious! - Love Is Real
+++    • Nefarious! - Love Is Real  
34:05 - Setting up a Computed Property for Mapping Filter Current and Name
43:03 - Hacking Together a Watch Function to Update CSS Variables
++ Wes Bos Javascript30 Course
+++ https://www.javascript30.com
56:16 - RabbitWerks DevSticker Giveaway Spotlight
1:04:45 - Resume From Break - Continuing the Watch Hackage
1:34:32 - Deep Watching the Filters Object for Changes
1:38:55 - Walking through the Filters Watcher, Step by Step
1:42:10 - Updating the CSS Filter Variables with the Watch Active Filter
1:59:50 - Session Recap
2:02:40 - Session End


====================================
**Check out Cloudinary for amazing Image and Media hosting, free plans start you off with 10GB of storage, 20,000+ monthly transforms, and 20GB of monthly bandwidth.
https://cloudinary.com/invites/lpov9z...
====================================

Live project work. Coding in JavaScript.
Please feel free to leave a comment or suggestion in the chat!

Thank you and Enjoy!

music from code radio - freeCodeCamp
   • Видео  
https://fcc.im/2Fi7dZW