Category: Coding

Presenter Ed Charbaneou

• Style Comparison
  • Functional Programming
    • Focuses on mathematical progress
    • Stateless
    • Fixed expressions that are stateless and return a result
  • Imperative
    • void method
    • black box
    • maintains state
• A Functional Focus
  • Application doesn’t maintain state
  • Why now
    • Multithreading
    • Cloud computing
    • Stateless much better when multithreading
    • Maintaining state is hard, especially in multithreading
• Functional Features
  • 3
    • LINQ
    • => Expressions
    • Extension Methods
  • 6
    • Expression Bodied Memebers
  • 7.1
    • Tuples
    • Pattern Matching
    • ++Expressions Bodied Members
  • .net does not yet have immutable types
    • immutable type cannot be changed after its insantiation
  • Func Delegates
    • Allow us to pass around code as a variable
  • Higher Order Function
    • A Function that either takes a function as a parameter or returns a function as a parameter
• Method Chaining (Pipelines)
  • Don’t see pipes in .net since can method chain
• Extension Methods
  • Yep they exist.  They have existed for a decade, not sure why going over them here.
• Reviewed yield/return.  Another 10 year old structure.  Functional, I suppose.  I always thought purpose was to be able to act on iterated values without having to finish iteration.
• Reviewed LINQ methods available.  OK.
• Now onto programming excercise

Presenter: Nathan Loding

• Real World
  • Blog and Todo lists are example apps, but there are actual real apps that essentially do the same thing.
  • App we are building here points at an API, normalizes data and presents it as a ToDo list.  If you change api and normalization should be able to re-use this outside codemash.
• What we are doing today
  • React
  • Redux
  • What we are not doing
    • tooling
    • syntax
    • testing
    • deploying
    • server side rendering
    • react native
    • css in JS (JSS)
• What is React
  • React if a library for providing a view of data rendered as HTML
  • Abstracts DOM (Virutal Dom) , diffs changes and re-renders
  • Component hierarchy
• Why use React
  • Small, fast, ‘single purpose’ library
  • Works well with other libraries
  • Reusable components fit easily into existing apps
  • Helpful error messages with JSX
    • JSX is you are writing html inside your javascipt instead of writing html with javascript inside.
  • Why Not use React
    • Looking for an all-in-one solution
      • Angular for instance
    • Morally opposed to JSX(html in js)
    • Morally opposed to Facebook
      • Licensing is wonky
  • On to coding, this is a lab afterall!
• Notes from lab
  • • You can do server side view rendering with React
    • RegisterServiceWorker
      • Preloads all statics files.  For ‘Progressive’ web apps, whatever that is.
    • You can import css in your app files in react, don’t have to put in html
    • React components have a life cycle, and state.  Most importantly they need a render method!
    • State is mechanism for react watching changes.
      • • Have to set state object in constructor of component
        • Have to use setState method to update state object subsequently

          class App extends Component {
          
          constructor(props)
          {
          super(props)
          
          this.state = {
          counter: 0
          }
           this.increment = this.increment.bind(this)
          }
          
          increment()
          {
          this.setState({counter: this.state.counter + 1})
          }

      • Have to bind functions to component
        • Can do so using ‘bind’ in constructor
        • Can call using like lambda function in html
    • const versus class
      • can use a ‘const’ to return stateless, dumb html component.
  • What is Redux?
    • Manages state changes
    • Separate from react, can use with straight javascript, angular, whatever
    • Redux terminology
      • Has an event ‘store’
        • Components listen to events in the store they are interested in
        • action goes through ‘reducers’ that update the store
        • Components dispatch ‘actions’, they are reduced an update the ‘store’ which components listen to for particular actions.
        • reducers seem to be partitions in the store you access to for listening and dispatching to.
      • Map store state properties to component properties and that causes them to listen to and update when those store state properties change
    • React has a lifecycle
      • Can call methods to run at different life cycle events, to kick off getting data and such.
      • action creators are event firings essentially

 

 

Presenters Philip Zastrow and Catherine Meade

• What will me cover
  • SASS PostCSS
  • Grids, Latest Design stuff
  • Can I use
  • mdn.io
• Modern CSS
  • @Supports
    • • Allows you to declare css elements based on what is supported by the browser

      • @supports (display: flex) {
          div {
            display: flex;
          }
        }

      • pseudo-selectors
        • li:nth-child(3n)
{
background-color:green;
}
      • attribute selectors
        • a[href] {
color:white;
font-size:2em;
}
        • a[href=”https://css-tricks.com“] { color: #E18728; }
      • Css Tricks
      • Flexbox versus bootstrap, or using them together! bootstrap flexbox!
        • Flexbox and grid together are all you need now.  Back in the day using floats and such because all we had.
        • center text in a box
          • justify-content: center;
            align-item:center;
          • justify-content:space-around
          • text-align: center
        • Flexbox all over now, just use it.  Makes it really easy to get things centered and positioned well.
        • Read flexbox article from css tricks : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • Mix Blend Mode
    • Photoshop like behavior in the browser!
    • Filter
      • grayscale and blur all in css!
      • filter: drop-shadow(1em 1em 0.5me deeppink)
        • this will suck in ignoring transparent parts of image, which is really neat
        • https://developer.mozilla.org/en-US/docs/Web/CSS/filter
      • backdrop-filter:  really neat, but not very well supported
  • Selectors that can replace javascript
    • target
      • https://codepen.io/zastrow/pen/vKqbya
      • target if id is on page and id is in url then target true
      • they did this crazy thing with hidden checkboxes and showing siblings when checkbox is checked.  Checkbox was invisible but clicking on the div checked and unchecked, so could get toggling without javascript.
  • Units
    • vh – viewport height  — height:200vh  –this would be twice viewport height
    • vw  -viewport width  — width:200vw  — this would be twice viewport width
    • also have max and min values.
    • can use on text size to scale font with viewport
      • font-size:3vw
      • fitext is a hepful tool.
  • SASS
    • Preprocessor
      • Mixins
        • • mixins are reusable pieces of sass that can accept variables and output several rules
          • basically they are functions
          • writing mixins
            • @mixin triangle($color:dodgerblue, $fontsize:1em)
{
height:$fontsize/2;
}
              • • $’s are variables, defaults follow the colon.
                • support @if and @else control statements in mixin

              @mixin wrapped {
               @if $wrapped == true {
               .wrapper & {
               @content;
               }
               }
               @else {
               @content;
               }
               }

          • sassmeister.com will show you sass css output
          • Writing custom functions:
            • returns a value instead of just setting properites, which is what a mixin does.
              • You can use a function in a mixin.
          • Maps
            • They appear to be enums in css
            • use and @each loop to iterate over map, or get one value as below

            • $sparkblues-light: (
                1: #A3DAE3,
                2: #D5F2F7,
                3: #EAFCFF
              );
              //// Sparkblue Dark
              $sparkblues-dark: (
                1: #318c9b,
                2: #1C4C55,
                3: #0f3138
              );
              
              // Sparkblue
              @function sparkblue($hue:null, $level:null) {
                @if $hue == darken {
                  $r: map-get($sparkblues-dark, $level);
                  @return $r;
                }
                @else if $hue == lighten {
                  $r: map-get($sparkblues-light, $level);
                  @return $r;
                }
                @else {
                  @return #50B7C8;
                }
              }
              

          • There is some sass like behavior in vanilla css
            • Variables are part of css
    • Grid Layout Starter
      .grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 2fr 1fr;
grid-column-gap: 1em;
grid-row-gap: 2em;
}
    • fr is for ‘fraction’:  above 1fr 2fr 1fr makes for 4 total and dividing by them
      • for height 1fr is based on content height
    • Grid By Example is a useful site for Grid
    • Grid is only implemented on newest browsers, flexbox is safer.

Presenter Abhiram Ravikumar

• What is block chain?
  • Peer to peer protocol
  • Transactions recorded in blocks, chain of blocks
  • Each block has pointer to previous block’s hash, so can’t change a block without changing all subsequent blocks in the chain.
  • Mining is process of validating blocks of transactions
  • Each node in network has copy of decentralized ledger
    • Bitcoin this is only transactions of bitcoins, but can be anything
• Reviewed Bitcoin
• Ethereum
  • Ethereum is a decentralized platform that runs smart contracts: applications that run exactly as programmed without any possibility of downtime, censorship, fraud or third-party interference
    • -from ethereum’s webite
  • Unlike bitcoin smart contracts allow ledger for ethereum to apply to whatever smart contracts are created
  • Ether is unit of transactions, like bitcoin.  When offer a transaction apply ‘gas’ or amount of ether it pays.  More ether, more quickly it is processed
• We then used an ubuntu VM to run mock ethereum block chain and build a small node based voting application over it.
  • Repo for lab code
• Interesting link about apps build using block chain: https://www.stateofthedapps.com/

Parting Thoughts

Didn’t pickup much more than I already knew about bitcoin, but had never seen ethereum before so that was enlightening.  Had fun monkeying around with node on ubuntu and do have a better clue as to what block chain provides beyond bitcoin.