Tue, November 23

CPNT 200 Day 6 - CMS Page Design

Topics

Today we will analyze these pages for layout and design. Tomorrow we will look more specifically at the actual content.

If something is meaningful to you, the audience you'll gather will likely be the folks that find it meaningful, too.
Sarah Drasner

Analyze an index page an a blog article for design. use the following questions to guide your analysis. Pick 1 page to discuss with the class.
Write your notes in a gist to share

Each of these sites contain blog content among other information. They each focus on showcasing the developer's strengths and interests.

How does the developer present themself?
- visually, through narrative...
Without looking for anything, what catches your interest when scanning the page?
Sketch out the content hierarchy on the main index page or blog index page (if they are different)
- do this quickly, if you have to question the design etc, take notes of what is confusing
Identify as many components as you can
- components are repeated ui elements used to portray different content
Are there any ui features that all or most of these pages share (that go beyond the obvious)
What does the layout do well?

Navigate to one of the actual blog articles and analyze it's design. use your devtools

How well does the developer use:
- Typography
- Color
- Layout
- Hover Elements
- Animations
- Sound
- Length
- Contact & Social Media
How different is the mobile experience? (use devtools to check mobile ui)
Inspect elements that are done particularly well or bad and take note on how they implemented their design.
- this can include font size, line height etc.

We will build a small todo app using these next two vue directives

v-on

Used for event handling. Documentation
v-model

Used form rendering bindings. It's like v-bind but data can pass both ways between parent and child components. Documentation

v-on:event="method

@event="method"

v-model is used for two way bindings. This is especially important for forms.
You can use v-model for all of the input types
Checkthe documentation for info on how to use v-model
v-model is also useful for passing information from a child component back to a parent component
v-model works great with vue conditionals v-if/else statements
Syntax:

<input v-model="message" type="text">
<p> Print out the </p>

Use computed and methods for adding javascript functions to your code

computed

In template expressions are intended to be simple to keep the template clean and readable. Use the computed property to render logic and complex JavaScript. computed is a property that goes in your script tag, just like props and data().
methods

Functions in the methods object are used when you need to perform functions that handle events. methods are just like computed but will re-render again and again.

Computed property's dependencies are reactive values. They only calculate when needed.
- If you need something to always be recalculated on render, use methods just like computed
- a great example on the vuejs documentation is the returning of Date.now() in computed. it is not reactive so it wont be re-run on render
  - Instead, returning Date.now() as a method, will re-render.
- The caching feature of computed is especially useful when you have really heavy functions that process a lot of data. It keeps the execution down to a minimum.
Example using array methods to reverse a string

data () {
  message: 'hello'
},
computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

<div>
  <p></p>
  <p></p>
</div>

The documentation will show more information about how to use computed properties, but this should be enough to get you started. Just remember to put reactive logic into computed and you're good.

These are like computed, but are always watching, so they work especially well with v-on

Review the documentation for excellent examples that show how the methods can be used for event handling with v-on