You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
talking points to leverage in different situations
background
skill set
career goals
Used during:
recruiter calls
cover letters
resume profiles
intro emails
netowrking events
Incorporate at least two or three:
Who are you?
Why are you here?
Where do you come from?
What experiences have you had in life that make you the person you are today?
What is your passion?
How were you inspired to join this program?
What do you hope to get out of this internship?
What has your experience been like so far?
What does this internship mean to you?
There should be a moral / point to your speech that changes depending on the audience
Consider 4 things into crafting the speech
What do you do well?
professional accomplishments
common thread in all jobs
how do I improve the rolls I am in
Activation words: adept at, proficient in, accomplished, prowess, dexterity, expertise in, savvy
Greatest strength?
where are you most assured?
the opportunity to do _ is what really drew you to current role
Activation words: Have a knack for, talented at, effective, penchant for
What would you like to do?
frame aspirations:
gain exposure or credibility in the industry
hoping to find a role in...
suggestions as to how...
opportunities for me to develop
looking to write for
insight on how i can apply...
What's your why? Motivation
Ask yourself:
Who do I want to help or inspire?
Who benefits from my work?
Why do I enjoy the work I am doing?
Activation words: because, on behalf of, I owe it to, inspired by, I want to inspire, I believe
Focal points
Techincal interests
Software developer, ios developer, full-stack, etc.
client facing, design focused, specific languages
what excites you about coding
Industry or environment prior to development
What were you ding, key impacts, main skills and overall focus
Draw on strengths from prior roles
leadership, customer service, finance
Do not mention Alchemy Code Lab
focus on intense training program to career change
Key strengths and core values
what skills or characteristics do you bring to the table that make you a unique hire
outside of the typical assumptions of a job description, what about you would add to the organization
personal attributes that are fun
different pitches for different circumstances
networking meetup vs interview
Public Speaking
Rate of speech
Speak quickly due to anxiety
Be mindful to slow down
Strategic pauses
dramatic and adds significance
Body language
nonverbal communication
unconcious nervous ticks
pacing, hands in pockets, lip biting
Make eye contact with audience
look around! Make eye contact with individuals
Practice
go to meetups and network
use a video recorder to improve nervous ticks
Memorize talking points
not in paragraphs, but bullets
more dynamic
toastmasters, speech classes
do things that give you performance anxiety
Know audience
Two categories:
people who want you to succeed and are engaged
people who are bored
Focus on topic and less on aspects of presentation
Focus is turned toward topic that excites you
Remember your appearance
split second first impressions
hold self well and dress well, helps image
Take a breath
Don't focus on perfection
Do your best
Study people who are great public speakers
pinpoint what they are doing that you would like to improve on
Elevator Speech
Casual:
I'm a front-end developer specialized in javascript, serverless, and design technologies.
Programming scratches my itch for critical thinking and puzzles; I consider the many ways a problem can be solved and attempt create the most efficient solution.
Prior to development, I worked within the medical field closely with physicians and applied to medical school. I was accepted, but decided to pursue a career that would allow greater balance in life.
In my free time, I spend a large amount of time staying active through climbing, hiking, and planning events centered around building community.
Formal:
I'm a front-end developer specialized in javascript, serverless, and design technologies looking for work in web app development.
I am familiar with react / redux, component architecture, semantic HTML, and css animations.
I come from a background of medicine and working side-by-side with physicians as a team.
In a work environment, I am resilient, focused,and determined to produce my best possible. I will toil for hours to come to a solution, all while enjoying myself.
must move this.setPage() to be associated with userAuth event.
don't have hashchange be associated with page refresh.
create a map that has isPublic property. Sign in page must be public, along with homepage.
create protected routes using the encodeurl()
create an auth app with github via oAuth apps in settings for team project on github.
go to apps.twitter.com to create a new app for alternative sign in options. Can use your-app.firebase.com as url. Will need to take API keys.
users must stick with whatever they picked to log in. No account linking yet.
header will need to know the current user and change
create a user component
add a petsByUser node on the tree in firebase
add a hash to bundle.js in webpack.prod.js so browser does not cache the page because bundle.js is named the same as prior push.
firebase UI
npm i firebaseui
auth ui
will send a reset password to users that forget
firebase will allow options to send forgotten password email, delete user, disable user.
Demo pets deletion
There is an update method with firebase that will allow different references to different tree nodes to be attached to one another, must update starting from tree root
offer a confirm statement for the user to be sure
create an update statement that will set the pet node, image reference, images in storage, and owner node to null, and firebase will prune them.
.env
store firebase variables in a .env file.
require it within webpack config
create new webpack.defineConfig and add variables surrounded by JSON.stringify().
npm start will add these variables to the build
Day 16: Automation of image responsiveness
random notes
change the color of a svg by opening it up in VS code and finding the "fill" value and changing it to desired color.
Automation of Image responsiveness
use cloudinary
upload the largest image you think you will need first
max contianer width 1200px, then largest image will be 2400px wide for retina.
use aspect ratio option in cloudinary
create arrays to hold aspect ratios and breakpoints
there are no common aspect ratios for responsive design
can have alt on cloudinary or locally on object
have an image load at it's maximum for a range. Ex - load 900px image for 900-600px breakpoint range.
flex grow allows content to shrink and grow as needed in the given space, considered as a ratio.
CSS transition
transition is a shorthand property that represents [transition-property] [transition-duration] (seconds or miliseconds) [transition-timing-function] [transition-delay]
no commas between values.
order does not matter
multiple transitions are separated by commas
transition-timing-function has some presets called linear, ease-in, ease-out, ease-in-out, and cubic-bezier
.box:nth-child(1) {
transition: all 1s; // will give all defined transformations a change over 1 second
background 1s, //the background color will change quickly
transform 5s; //the transform will happen more slowly
}
.box:nth-child(1) {
transform: scale(2) rotate(90deg) translate(-10px, -25px);
//when scale is given one value it will apply it to both the height and width equally.
// all will be applied at the same rate
}
CSS animations
uses keyframes and names the animation to animate CSS properties. At minimum, need two key frames (0% and 100%), animation name, and duration.
GreenSock Animation API will help with more complex animations
animation chaining or working with SVG
can use cubic-bezier.com to create a curve for animation transition.
Planning animations
planned out in sketches and wireframes. Useful only when they help the user accomplish or understand something.
change blindness when transitions are too quick or subtle.
Sometimes the data can be loaded instantly, and animations / transitions are used to help make it clear something has happened.
provide some feedback
if there are instructions with the app, there must be a problem?
difficult to find the starting instructions again
Animations should reinforce visual cues.
Provide updates / visual transitions for new content.
Reinforce branding when choosing easing styles. There is also platform guidelines for ios and Android.
infinity for ios, flat for android
Reinforce status of user within system. Keep the user informed. Animation can make a loading process feel instantaneous.
Testing
test early, test often.
using transition features in prototyping tools should give a sense if animations are working
proto.io, invision, marvel
Accessibility
don't have animations flashing more than 3 times a second, seizure triggering
provide alternative content
not necessary if you have semantic html
SVGs should be inline with rather than drawn by canvas
demo
animations appear different on mobile vs desktop
css only animations execute more quickly than involving js
CSS is good at moving from sibling to sibling, parent to child. Not so good at targeting a parent.
make sure nav button and navigation are siblings
create a checkbox and attach interactivity to that
allows for use of pseudoselector ':checked'
no need to give semantic meaning
set the header position to be relative so the children can be absolutely positioned accordingly.
give the span a position of absolute, fill with color, use transform to spread apart
not going to use flex on the header as many parts are siblings (on purpose)
#navBtn span {
position: absolute;
right: 1rem;
display: block;
background: $lightGrey;
width: 36px;
height: 4px;
transition: all .25s ease-in;
&:nth-child(1) {transform: translate(0, 20px)}
&:nth-child(2) {transform: translate(0, 30px)}
&:nth-child(2) {transform: translate(0, 40px)}
}
input { //covers the burgernav
display: block;
z-index: 2;
position: absolute;
top: 24px;
right: 24px;
transform: scale(4, 3);
opacity: 0; //hides it but continues to have interactivity and exists in DOM
}
input:checked ~ navBtn span { //selects all siblings by the selector given
transition: all .25s ease-out;
&:nth-child(1) {transform: rotate(45deg translate(20px, 20px));}
&:nth-child(2) {opacity: 0;} //opacity chosen due ability to fade / animate away
&:nth-child(3) {transform: rotate(-45deg translate(20px, 20px));}
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 65px; //places it right were it was before, but allows the use of transitions
transition: all .2s ease-in; // when nav receeds, could be seen as annoying
transform: translate(0, -100%); //shoves the nav upward
transform-origin: 0 0; //starts animation from this position
opacity: 0; //hides it
ul {
li {
a {
color: $lightgrey;
text-decoration none;
text-transform: uppercase; //some screen readers read capitals letter by letter. This can avoid that.
text-align: center;
display: block;
}
&:hover {background: $buttonHover;}
}
}
}
input:checked ~ nav { //appears over the header, z-index problem?
opacity: 1;
transform: none;
transition: all .3s ease-out;
}
main {
article {
animation: dropMain 5s ease-out;
max-width: 1200px;
}
}
@keyframes dropMain {
0% {
opacity: .6;
transform: translate(-100%, 0);
}
70% {
opacity: .6;
transform: translate(5%, 0); //creates the elastic shake
}
100% {
opacity: 1;
transform: translate(0, 0);
}
}
@media (min-width: 720px) { //different animation for desktop
main {
margin-top: 3rem;
article {animation: dropMain .35s ease-out}
}
@keyframes dropMain {
0% {
opacity: 0;
transform: translate(-20%, 0);
}
30% {
opacity: .6;
transorm: translate(2%, 0);
}
100% {
opacity: 1;
transorm: translate(0, 0);
}
}
}
leaf: no children, usually presentation heavy and data rich (pictures)
siblings are branches from the same parent
one there is a cyclical dependency, the pattern is no longer a tree but a graph.
linked list is a set of nodes that points toward the next node
a single node can count as a tree
Recursive Data Structure is a repeating data structure
will often work with trees recursively
function countTo(inut,max) {
console.log(`before ${input}`);
if (input < max) {
const message = countTo(input + 1, max);
console.log(message);
}
return console.log(`after ${input}`);
}
countTo(0,3)
call stack:
countTo(3,3)
countTo(2,3)
countTo(1,3)
countTo(0,3)
console:
before 0
before 1
before 2
before 3
after 3
after 2
after 1
after 0
to walk through, create a call stack (last in first out) of each function call to keep track.
how to visit a tree's children before its siblings. Takes a node an console.logs the data for that node with indentation for the children.
function traverse(node, input = '') {
console.log(`${input}${node.data}`);
indent += ' ';
for (let i = 0; i < node.children.length; i++) {
traverse(node.children[i], indent);
}
}
binary trees have a left and a right property instead of an array of children.
go to rules at set read and write to true, same with storage
Storage is where images will go
do not update in real time, must refresh
"add firebase to web app"
place the initialization code within services tab called firebase.js
will be using the Evented API instead of RESTFUL API
Will create listeners on pets changing to update data
webpack can bring in npm install packages. npm i firebase will allow use of firebase methods.
db is realtime database
storage for uploading storage
auth for authorization
some of the firebase code will run in the browser, will keep itself in sync with the browser.
can go to database in firebase to see data stored
can set listeners to the data in firebase
.ref at the top level of data
.child for anything below top level (nested data)
means we only have to change data once in the database, and everywhere else that is listening for that piece of data, will change in near real time
if want data at a node, must get all data at that node
this is why images are stored not in the same node of all the other information. Will give back large amounts of information. Use the same key name under different parent node names. (petimages > key and pet > key)
db commands will return the function passed to it so we can remove the event listener with unrender()
child_added
child_removed
child_changed
data.key will obtain the name of the child node.
data.val() will obtain the values beneath the child node.
demo
when building app
start with routes (/home, /pets, /pets/petid, /pets/createpet, /account/me, /account/signin, /account/signup)
draw what the page will look like under that route
need to unrender() to unsubscribe from event listeners. If didn't unrender, would create memory leaks.
dom nodes may go away, but event listeners are still referring to those nodes, creaking leaks.
ask if the event should go away when done
can split window.location.hash.split('/') to check for parent component
store the pet id within the url hash, that id will then be given to firebase to call information.
make a choice to have the parent or child component handle data retrieval. If parent handles, will pass in a function with the creation of a new Child to call back.
don't have to 'update' an image, just add or remove.
after an image is placed into storage, must make a reference to that image under that item within the database.
can't get very easily from storage as it will return a download url instead of the image itself
create pet-images, create a key in database and storage that is the pet id, download the image under that key in storage, then add the download to the key in database
when deleting, must remove from both database and storage
have a helper function that escapes given url (encodeUriComponent(url))
pass in url from firebase
take a look at the docs to have things done to images
Day 12: responsive images
random notes
responsive fonts, use em instead of rem, otherwise they won't inherit.
jobs as a developer is not to create content. It will be handed to me.
not doing image automation or lazy loading yet.
I personally do better when I can see what assignments are due / when ahead of time. It helps me plan my time allocation. I strongly recommend having readings out at least a day ahead of time, instead of being released the day of.
The lectures still have redundant information that was in the readings. No need to go into such detail presented in the readings, instead build on the readings information. For example, reviewing all of the raster image types.
have #root be the grid
must remove .clip "jump to main content" out of root, don't want it to become a grid item.
Image Formats
avoid images whenever possible. Use icon fonts and pure HTML/CSS
logos are exceptions
pseudoclasses became available with CSS3
Vector images infinitely scaleable.
SVG are standard for vectors.
described in XML files
Inkscape is a free vector drawing tool
Adobe illustrator and google docs can export
Raster images comprised of individual pixels and color, lose quality when scaled up
slights amounts of scaling is okay
GIF, JPEG, PNG
GIMP is a free raster graphic editor
newer formats WebP, JPEG XR (lack support)
There are not good options for creating vectors from raster images.
PNG-8 vs PNG-24
PNG-24 is lossless format
Not used very often in the web due to high size demands
PNG-8 is limited to 256 colors, slightly smaller file size
JPEG is a lossy format. When saving, there is a quality slider.
JPEGmini can further reduce image size
an annoying multi-point process
WebP lossless image format, smaller sizes than JPEGS and PNGS, plus transparency. Limited support to Chrome and Opera mini
JPEG XR lossless compression, higher color accuracy, transparency. Limited to Edge and IE.
Responsive Images
Art direction: problem of the need to crop images differently for different screens
Especially noticable in wide hero images
resolution switching: problem for the same image in different sizes to account for various viewport or display densities
srcset handle resolution switching, chooses images based on viewport size and display density
<img src="small.jpg" srcset="large.jpg 1024w,
medium.jpg 640w, small.jpg 320w" alt="Michelle
Obama">
//img src should be mobile first, then have srcset define the others including the mobile first. Image name followed by width
element handles art direction problem. Serves different images based on media queries
@2x denotes a high resolution image
uses tags to find the best image for the job based on media queries
has an tag to fall back on, usually place mobile image in there first.
load heavy content asynchronously, only loads above the fold, or conditionally as it appears in the browsers viewport
reddit scrolling, pintrist, medium.com
serve low resolution blurred images until user scrolls into view.
Demo
Aspect ratios used:
large desktop: 3:1
medium desktop: 2:1
tablet: 3:2
mobile: 1:1
used google docs to create SVG
created 8 hero images, 4x aspect ratios and 4x @2x
resizeimage.net or gimp
can crop
make image sizes based off of breakpoints
mobile image width based off max width of breakpoint.
crop based on desired aspect ratio
start with big image and scale down
for @2x images, start with regular large sized (1500x500px), then have the retina (3000x1000)
webpack requires images to be in src, not components
maxwidth class added to grid items that you do not want to extend to sides of window. Don't add to hero images. Grid will go the whole width of the browser, then apply class to limit content.
<picture>
<source media="(min-width: 1024px)" srcset="/images/hero-xlarge.jpg, /images/hero-xlarge@2x.jpg 2x"> //will grab the 2x device if it senses it
<source media="(min-width: 720px)" srcset="/images/hero-large.jpg, /images/hero-large@2x.jpg 2x">
<source media="(min-width: 500px)" srcset="/images/hero-medium.jpg, /images/hero-medium@2x.jpg 2x">
<img srcset="/image/hero-xsmall.jpg, /images/hero-xsmall@2x.jpg 2x" alt="picture">
</picture>
Day Eleven: Web Type & Color
random notes
for labs: especially for the grid lab, I highly recommend a format similar to how labs went in 201 or 301. Have all the html scaffolding and webpack built up, and then give us pictures of pages that we need to make using grid. I could see you have us a pre-made paginated site where we have to change each page to match a picture format you give us. I think that'd be a great way to learn it. I feel that I spend too much time prepping the lab, creating the html instead of focusing on the topic we are trying to learn. This may also be better done in a lab that spans the entire week and we continually build something with it.
I think demos are most important part of how I personally learn, instead of being lectured. I would much rather have lecture hours cut down on slides and instead show me things in the demo. This also helps me feel more prepared for labs.
CDN will cache on the browser if a user has encountered that link before.
Fonts
serif: old and serious tones
slab: little variation between letters and serifs, like a typewriter
sans-serif: causal and modern
monospace typeface: occupy the same horizontal space. Good for code examples, not great for body copy.
Display typeface: used for headlines, large, few words to read. Script typeface falls into this category
Typewolf: recommends font pairings.
Google fonts has many incomplete sets that lack italics / bold. Be careful to choose one that has many options.
check the box "number of styles" and pick at least 3+.
Adobe Typeface is difficult to use, not free, but has high quality control.
If the creative liscence expires, so do all the fonts $$$.
CSSfontstack.com: gives similar font fallbacks.
System fonts: sans-serif fonts native to an OS, require no loading time.
may feel more comfortable to a user due to familiarity
there is no OS native serif font
Type Scale: prearranged set of harmonious proportions. Start with base font size, try different ones out to see what feels right. modularscale.com suggests harmonious size relationships.
text-rendering: optimizeLegibility; achieves more accurate kerning.
can slow down loadtime
Tracking: property changes the spacing between letters all at once
Kerning: individually alters spacing between letters, good for logos
Leading: controlled by line-height property, unitless
start with 150% of type height
tighten line-height on headers
increase line-height on paragraphs
Fluid Type: use viewport units to make fonts scale with screen size.
to apply google fonts only as needed, use an @import url(googleAddress) in css and target the elements that will recieve the font.
add selected to drop down html options to have it already on something that is not at the top of the list.
Day Ten: CSS Grid
random notes
be sure to use the grid lines when making sketches
don't center large body of text, hard for the eye to follow (no more than 2-3 lines)
ul > li select direct descendants
ul + li select adjascent sibling (immediately succeeding)
ul ~ li general sibling (need not immediatley after, all following)
ul > * all direct descendants
ul li - descendant selector
margin-top: auto can vertically align flexbox items.
within nested css elements, & refers to the element it is within
li {
border: 1px solid black;
&:last-child { //adds the pseudo-selector onto li
border: none;
}
}
Grids in Webdesign
use for alignment, organization, consistency, flexibility
constraints are helpful in design. Underlying structure has a focusing effect.
Parts of the grid
units are basic building blocks. 12 unit is fairly common as it is divisible by multiple options (2/6, 3/4, 4/3) but not too many. CONSTRAINTS! May be dying down as a trend.
gutters are vertical space separating each unit
multiple units and gutters form columns
mobile grid should extend a single column across the entire screen
justified text in a grid can help continue the design
watch for 'rivers' between words, will draw the eye to negative space
CSS hyphenation can possibily help
JS plugins exist to help as well
Grid layout
grid does not replace flexbox - both work together
fairly new, not supported by older browsers
avoid grid if older browsers need to receive an identical experience
display: table can be a comparable experience
polyfill ill advised
display: grid: defines element as grid container. Placed in rows by default and span the full contianer width. Grid items are only the direct descendants of the container.
grid is defined by grid lines, can be vertical or horizontal.
space between to adjacent grid lines is called a grid track.
fractional units: 1fr represents 1 part of the available space.
can be used as a ratio for spaces. (9 boxes / 3 boxes = 3fr / 1fr)
will make space fit no matter the other things (grid gaps, etc.)
flexible
naming grid lines
Each set of names (in quotes) defines a row and each individual name defines a column
beware markup flattening or presenting HTML in a less semantic way to achieve grid goals
placing markup in less than optional order
cannot create a single grid layout with nested elements, like within main
subgrid discussion has started
need to combine grid with flexbox right now
create a sticky footer in grid layouts
min-height: 100%
html {height: 100%}
demo
in main.css
.wrapper {
display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"nav"
"content"
"ad"
"sidebar"
"footer";
}
.main-head {grid-area: header;} //ids would've worked the same
.main-nav {grid-area: nav;}
.content {grid-area: content;}
.ad {grid-area: ad;}
.side {grid-area: sidebar;}
.main-footer {grid-area: footer;}
.wrapper > * {
border: 2px solid #000;
background-color: yellow;
border-radius: 5px;
padding: 10px;
}
@media (min-width: 500px) {
.wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header" //spreads it completely over both defined columns
"nav nav"
"sidebar content" //first gets 1fr, second gets 3fr
"ad footer"
}
nav ul {
display: flex;
justify-content: space-around;
}
}
minmax:
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(10, 100px); //10 columns fixed at 100px
grid-template-columns: repeat(10, 1fr);
//10 columns expand to fill available space
grid-template-columns: repeat(auto-fill, 100px);
//will fix as many 100px boxes as the window allows
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
//will fix as many 100px (at minimum) boxes as the window allows, THEN use 1fr (maximum) to adjust
//when window size is increased, will stretch box size until another 100px box can fit onto the row of boxes
}
.box {
padding: 10px;
background: #ccc;
}
app.css
@import '../variables.css' //import some variables!
.main-head {grid-area: header;}
.content {grid-area: content;}
.main-footer {grid-area: footer;}
.wrapper {
max-width: 1024px;
display: grid;
margin: 0 auto;
grid-template-areas:
"header"
"content"
"footer";
min-height: 100vh; //can be larger, but at least this tall
grid-template-rows: auto 1fr auto; //auto leaves height as they are natually. 1ft will divy up what is left and fit it on the screen (helps with sticky footer)
}
variables are helpful in component architecture. Don't need to keep repeating yourself.
name visual theme colors.
avoids the find / replace annoyance
variables.css
$dark: #000; //needs dollar sign to work
Day Nine: Stacks and Queues
random notes
the big O does not care so much about the slope except in extreme nit picking efficiency. It is a bigger deal for exponential change in problems.
placement of -- or ++ matters in the items incrementing or decrementing.
--item when returned will decrement prior to being returned
item-- will decrement after the item is returned
let a = 2
let b = 2
console.log(--a); // 1
console.log(a) // 1
console.log(b--); //2
console.log(b); //1
random problem:
function anagram(a,b) {
let arr = a.split('');
let brr = b.split('');
if (arr.length === brr.length) {
if(arr.sort().join('') === brr.sort().join('')) {
return true;
}
}
return false;
}
control + backtick in chrome dev tools will open the console drawer
option + command + j brings to console.
look for errors in webpack at the top. Can quit and restart with a clear.
any time webpack config is changed, must restart the server!
window.onbeforeunload: when work needs to be done before user returns to page
webpack config
entry: what do we want to call the output and where does it want to be put
output:
filename: this path is for npm build, npl start (webpackbuildserver) runs in a temp folder
devtool: gives us source maps (debug code we wrote, not what ended up getting "built").
instead of taking error messages to bundle.js, gives error messages from files used in development.
plugins: add high level functionality to webpack
new htmlPlugin: create an index.html based on our template, will add in <script> to bundle.js
module: loaders tell webpack how to require (or import) things
htmlloader
post-css: allows us to write nested css and auto-prefix css props that needs to be browser specific
cssloader: turns css into js that exports a string that is css, else it would try to interpret as js
styleloader: dynamically puts css into style tag of document head, don't use in production. Used in development to update css without refresh in browser
url-loader: if htm-loader sees a .jpg, .gif, .png, .svg, will use url-loader to load image directly (inline) into the src attribute on the img element. use a limit to give the loader a threshold to change how it solves this problem. When the limit is exceeded, it will load the image as a resource in build and create a local reference.
will cache file names and not update them if change is not detected.
Template Class
html will turn template into DOM from a string form so DOM methods can be used
.content is a method that creates a document fragment. Lightweight way to store a small tree of DOM nodes.
template can have as many parents or whatever in it
the template fragment itself is not appended to the DOM, the contents are (like a shopping bag)
since the fragment is being reused, have .cloneNode(true) for deep cloaning. Otherwise would only be able to use the fragment once (non-reusable shopping bag)
.cloneNode() faster than creating the elements from scratch
Service Caching
caching results in localstorage
not used in production, easy to cache but must be validated. Greater analysis required, place a time limit on the cache. Uncaching is the problem in production.
Lab Demo
Vanilla JS Router
the # for ids have been used to abuse single page app
nowadays want these relative links to work without the #
create a dictionary that has all the hashes desired and point those hashes to a particular page. If a has does not exist in the dictionary, write logic that will take user to homepage.
hide/show vs re-render: re-render as once you start holding onto things that are hidden, you have to decide how to deal with the state it was left in.
in App.js:
const map = new Map ()
map.set('#books': Books);
map.set('#auth': Register);
export default class App {
constructor() {
window.onhashchange = () => {
this.setPage();
}
}
setPage() {
console.log(window.location.hash); //use to check and see if the event is even working
const Component = map[window.location.has] || Home;
const component = new Component();
removeChildren(this.main);
this.main.appendChild(component.render());
}
}
in Register.js
handleSubmit(form) {
const data = new FormData(form); //creates object from the data and gives it acces to methods
const obj = {};
data.forEach((value, key) => obj[key] = value)
}
for a show password button, you can change the type from password to text.
the pattern attribute on html forms allows the use of the title attribute (customizes the error message)
Events
touch events are translated to click. 300 milisecond delay due to registering a second click. Most browsers this can be fixed with setting the viewport size.
Functions
Variable Table
Name of variable: {type: number, value: 42} within the table
stores simple values (number, string, booleans)
const will lock that variable in the table
parameter names are added to this table and copy variables if given them. These values (arguments) are manipulated by the function, but do not manipulate the original variable
heep
for more complex variables (objects, arrays, functions)
will have a memory address associated with it
name of variable is still referenced within the variable table, but the value is the memory address within the heep
object properties can be changed on the original, whereas the variables are changed where they point to
Enhanced objections
Closures
functions within outer functions that reference a variable within the outer function.
this will allow child function to 'remember' the variable declared in the parent function
does not remember the value, only the variable! The variable can be re-declared.
Day Seven: Thinking About Design
random notes
User Journey: Details the set of steps necessary complete a task from start to finish on your app or site.
Example of airline ticket purchase, start to finish
google flights, momondo, expedia, kayak, scottsCheapFlights
Birthday is unneccesary as a calendar picker; people know their birthday and the day does not matter.
Self-evident: no time to understand / Self-explanitory: a few seconds to understand
Can create a graphic that shows steps / implementation (1,2,3)
WYSIWYG: what you see is what you get
dream weaver
canvas post making
If use CAPTCHA, perhaps use google recaptcha
Other captcha are awful and time consuming
Forgiving format vs stringent format
Stringent: not much variation in what can be typed (zip code, credit card)
forgiving (email, street address)
Scanning / Not Reading
Headline hierarchy
Spacing for headlines makes it more obvious where the headline belongs
High contrast for text that matters more
Design for eye patterns: F-pattern for text heavy, Z pattern for image heavy
Reduce distractions
Take advantage of conventions
logo in top left corner
search icon is magnifying glass
shopping cart is where selected items are stored
Is it necessary to reinvent something?
only if it adds a significant amount of value that it's worth a small learning curve
Keeping above "the fold"
navigation, logo, vital information
no reason to fight scrolling as a user will scroll.
UI patterns:
ui-patterns.com/patterns
patterntap.com/patterntap
littlebigdetails.com (not updated frequently)
Test design with blurring it.
If the wrong elements stand out, or nothing does, fix it
Important elements with white space
Make it obvious what is clickable
use a pointer finger
hover states may be outdated due to mobile
Skeuomorphism
References a real-world object
Offers cues to an interfaces functionality
Flat Design
fast loading time and less visual clutter
Google Material Design: material.io/guidelines/
Everything should feel like thin sheets of paper, including animations
realistic drop shadows
ios Human Interface: developer.apple.com/design/
visual depth
gradients and blurs are favored
animate things at infinity
Sketch
Explore concepts. Computers are used for refinement
Two phases:
Brainstorming: get ideas down quickly as possible
Communication: execute and convey solutions clean
Sticky notes can represent layers of interactivity: green for success, red for failure
UI stencils exist for lots of sketching: uistencils.com
Wireframe
arragement and function of interface elements and nav systems
focus on functions
no color yet
x-box to denote where photos may go
Clear evidence of:
grid
visual hierarchy
navigation
functionality
scannability of body copy
Can use digital tools
Adobe illustrator
Sketch
Axure
UXpin
Balsamiq (free)
use real content at this stage
prototyping
demonstrate nagivation and interaction before development starts
proto.io
inVision
Marvel (more for free)
Day Six: UX Research and Strategy + Checkout Usability
Random Notes
UX: The user's experience and emotions with a product. From first introduction to interaction with product and services.
Example: Apple - social currency, expensive, easy interface, clean design
Book reference: Simple and Usable
UX Process
Discovery: what do I know about the company? The types of people that use it?
Testing assumptions (ask questions about product from client)
Are there things competitiors do better than client?
Opportuniites
Are there changes in technology, markets, or social patterns that client can take advantage of?
Threats
Harmful changes in technology, industry standards, competitor practices?
Strategy Document
Value propositions: Brief statements communicate what a customer should expect from product
“Snapchat is the fastest way to share messages, photos, videos, texts, and drawings with friends for a limited amount of time.”
“Waze is a social traffic and navigation app based on a community of drivers sharing realtime road information while driving.”
Can mess around with branding after people recognize the brand. How gmail became associated with google.
Competition Analysis
Direct and indirect competitors
Amazon is an indirect competitor for most products
Personas: informed describing product use
user description
details should be relevant to the product and grounded in research (avoid stereotypes)
include social media? only if relevant to product
internet savvy: do include
typical behaviors
Browse in desktop or mobile?
More likely to purchase in desktop or mobile?
How focused will users tend to be when using?
needs and goals
Why did they log on? Just comparison shopping?
Observe users use similar products and take note of what helps / hinders users achieve goals
UI design criteria
specific design goals
"increasing conversion rates on an online form"
"The form looks cluttered, make it cleaner"
Success metrics
HEART framework:
Happiness: satisfied with product?
Engagement: how long / deeply are users involved?
Adoption: product / feature attracting new uers?
Retention: existing users returning?
Task Success: how often / quickly do users complete specific tasks?
Web Analytics: tracks site visitation (Google is free)
new user vs returning visitor
types of devices used
Length of visit
Bounce rate (users see only one page)
How much is within control?
Campain success rate (email, social media, ads)
How and why people are landing on page
Conversion Rate (#users that achieved specific, measurable goal / total visitors)
Do users feel secure?
Hidden costs?
Frustrating process?
Success Metrics
Attitudinal: interviews & surveys (why)
Behavioral:
Quantitative: web analytics (what)
40% of users bail at page 3
Qualitative: usability testing (how)
Users bail because of issue with prompts
Heatmaps:
where users click on a page
how far users scroll
eye tracking: forms an F-pattern in western cultures
Don't put important things in lower right corner
names, cute images, sexual images can break this pattern
Qualitative tests
usertesting.com - gather users to speak their mind on product
almost any stage with almost any user
can test even with a sketch
have the user think aloud
give the user specific tasks to complete and some input into task details
find tickets in your town on Feburary 1st to a show
look around and describe what you see / think what the site is about
depending on findings may want to run an A/B test
detect which version does better
small variations in changes, minimal variables
make sure repeate users have same variation each time
Day Five: Whiteboard Arrays, Objects, Big O
**Big-O / Operational Complexity **
Performance and memory demands
Notation:
O(1): flat line graph
arr[i]
O(n): linear graph
single for loop
O(n2): exponential graph
double for loop
O(2n): shit gets real fast
O(logn): slope decreases over time
sort / dictionary functions
Whiteboarding
Studying datastructures and algorithms
Reverse engineer the questions / what was being looked for
Adds a level of stress
Collaborative code editors are newer version of whiteboarding
Real interviewing may or may not be helpful in the whiteboard process
Example:
in (yo, 3) out 'yoyoyo'
function greet(greeting, n) {
const result = '';
for(let i = 0; i<= n; n++) {
const += greeting;
}
return greeting;
}
is it legible, consistent font size, horizontally level, correct indentation, syntactically correct, good scale for whiteboard
Start at top for enough space
Leave room for test cases on the right of the board
Ask questions: Can I assume valid input?
Develop a model: input | output
Think out loud while working. If need silence, let them know you need it.
Focus on the happy path first, not edge cases (invalid input)
Master time and space, how coplex will the code be?
If interviewers offer advice, take it.
Day Four: JavaScript
Random
Kinds of functions
functional programming
syncronous
happens 0-n times
asynchronous callbacks (fetch)
happens once
promises only apply to this category (.then)
event emitters
generally asynchronous
0 to n times
Distributed Systems
The totality of the app.
Capabilities:
Persistence: Usually when an app is exited, it ends. Things will need to be saved to persist. This is usually done with a database.
Networking: example TCP / HTTP protocol. Connection established between a laptop (user) and a network (server). Does not care what it is sending. A language must be agreed upon between request to server, and delivery from server.
HTTP request will send a message and receives something back. Another protocol called websockets is for bidirectional information, like chatting.
JavaScript History
Originally a scripting language. Forego typing systems, will intelligently figure it out. Will be able to compare strings and numbers, but strangely.
JS uses floating point numbers. Will be off by a small point (0.0001).
Component architecture
A piece of UI
The user is royalty, user concerns become components
A search bar, information about what page the user is on, a book list with book components
Each component is modular and organized in the code as such
EMAScript is an organization that decides what will be part of the language. It goes through stage 1-4.
NodeJS came out in 2008. Stuff that happened in NodeJS was desired in vanilla JS, thus ES6 added a bunch of new stuff. Much of it was syntactical sugar. Babel would take some ES6 sugar and turn it into ES5 before browsers had support.
ESlintrc
sourceType: module, allows import / export type of JS
fail fast, fail early: make the red squiggle go away
Don't word wrap in editor.
Modules
import / export keywords
ES6 format
webpack will append js at the end of html. webpack asks for the entry point (main.js). with importing other js files, we only need to refernce files to main.js.
ES6
class is a constructor. There is a method called constructor that designates the creation of an object
.cloneNode() will clone a node. Add 'true' to clone all children as well.
Lab Info
use Vanilla JS.
use component architecture
ok to emulate code, do not copy directly. Process is important part.
Step by step growing.
cp in terminal to create a copy of something within the folder of what you are copying.
use kabob-case in html and css
use camelCase in JS.
use TitleCase with a constructor function / class in js (even in naming files)
lab demo
there are nodes in the DOM, elements are one type. A document fragment is a generic bag for html stuff. It's not yet in the DOM.
be sure everything is imported at beginning (template, html, css, Search, {searchBooks}, BookList) in App.js
To insert a child component into a parent component
to create the search (will capture what the user wants to search for and nothing else)
search // folder
search.html
search.css
Search.js //will contain a class
Paging.js
paging.css
paging.html
separate components from services in file folders. Services will contain API querying information.
make exports named
export function namedExport(searchTerm) {
fetch(`${API_URL}&q=${searchTerm}`)
.then(response => response.json());
}
absolute is relative to the nearest parent. If there is no parent with a position: relative, it will move with the page scrolling and attach to document body.
if a parent div is set to relative with an absolute positioned element within it, the absolute position element will move around inside the confines of the relative parent div.
Used for captions that float over images.
relative is relative to its normal place in the document
fixed will attach to viewport and not move with scrolling
sticky is a hybrid of relative and fixed. It is treated as relative until a threshold is met and then it is treated as fixed. The threshold is designated with top, bottom, left, right positioning.
z-index will alter the layering of elements.
calc(100%-4rem) will calculate odd measurments of different values for you
CSS display types
none, not good for screen readers
block, default for p, h1, and div. Will take up entire width of parent container. Does not allow elements to lie next to each other.
inline, default for a and span. No line break after it and allows elements next to it. Does not allow width properties.
inline-block, default for button and select. Can have width, height, padding properties and allows elements next to it.
table, forces non-table elements to behave like table cells, deprecated. Use <table>.
Float and Clear
Float allows content to shift around elements that are floated.
Was used in the past to create column layouts, which had issues
Clear will fix elements that should not flow around the floated element.
element::after { // will clear after a given element
content: "";
display: block;
clear: both;
}
Flexbox
display: flex, defines an element as a flex container.
display: inline-flex is an option for inline elements, but not common
order will reorganize flex items within container
flex-direction, displays the direction of items within container. row, row-reverse, column, column-reverse are options.
flex-wrap, allows items to flow to another line. Wrap, wrap-reverse, and nowrap are options. Wrap-reverse will wrap in the opposite direction given by flex-direction
justify-content, defines alignment along the primary axis. Could be horizontal or vertical depending on flex-direction. Options are flex-start, flex-end, center, space-around, space-between.
align-items, defines alignment along secondary axis. Depends on flex-direction. Options are flex-start, flex-end, center, stretch, baseline.
align-content, when container has multiple lines, will distribute lines within the container along the secondary axis. When items are on a single line, will have no effect. Options are flex-start, flex-end, center, center, stretch, space-between, space-around
flex-grow, specifes the amount of space an item should take within a flex container. It is relative to the size of other items in the container. Given an integer.
flex-shrink, specifies the amount of space an item will shrink to in a container with other items. Given an integer.
flex-basis, specifies the initial main size of a flex item. Determines the size of the item unless otherwise specified.
Header: document or section header. Can be used multiple times in html.
Nav: major navigation, table of contents, prev / next links
Article: self-contained content, test: shareable to social media
Section: groups content that is structurally related and usually with a heading.
Aside: tangentially related to surrounding content. Could be considered separate. Such as "Read more about __ here". "About the author" Not presentational.
Footer: End of page, article, section. Can have multiple on a single page.
Main: identifies the main content of the body. Helps screen readers where the main content begins. Cannot be a descendant of other HTML5 tags (header, nav, article, aside, footer)
Accessibility
A11y project checklist:
Semantic Headings help screen readers jump to sections of relevant information. <h1> - <h6> used properly will allow screen readers to jump around. Make a decision about which h to use depending on content. Do not use the h tags based on size of font appearance!
Landmark Roles: programmatically identify sections of the page to help assistive technologies.
Validation will warn against some redundant elements with roles. Ignore warnings at this time as not all accessibility features are universally supported. Not all browsers may understand element semantics, roles required.
Accessible Links: hyperlinks be visually obvious (css). If removing the underline, what else makes it stand out. Be specific in the link when appropriate. Use focus indicators (tabed on). Do not hide entirely, but can change with css. Provide a skip navigation link for screen readers. Have it hidden to visual users but not screen readers.
Alt Descriptions: every image needs a description unless it is decorative (background image). Very little use for decorative images nowadays.
Accessible forms: ordered logically from user's perspective. Provide a label tag on all form controls.
Sim Daltonism for mac users. Visualize colors as perceived by users with various types of color blindness. https://
michelf.ca/projects/mac/sim-daltonism/)
ChromeVox screen reader plugin. Accessibility Dev Tools.
lab
no use for div or span yet at all.
homepage will be table of contents, with a nav surrounding the articles.
figure demonstrates an image and caption in one enclosed element.
bitly.com will shorten urls.
target="_blank" opens a new window when clicking on a link. Is a huge security risk. Use rel="noopener noreferrer" in the tag.
