Hi there.
So I went to this React JS workshop at Home Depot's Quote Center in Vancouver. Secret location. I won't share. They fed us Chipotle.
AS followers of my blog know, this work is more often than not my study and not my practice.
So this is my study. I am re-energized for coding and determined to better grasp Javascript basics and have a handle on React. This was a good first step and I have code to play with.
I could make sense of all of this stuff for those of you who click in and find this post, but this is more for me. Here's my notes, code samples, a link to the slides for the day, and other stuff.
They used A LOT OF GIFs. Very fun.
It was a great workshop hosted by some very knowledgeable, nice, well-intentioned people wanting to give more back to the tech community of programmer hopefuls.
The company had 15,000 applicants for its internship!
ALSO....
I learned about LBGTQ in tech, Out in Tech, and the cute rainbow Git Hub logo.
It was a good day, and then I went axe throwing in Oregon City.
SLACK
https://hdqcreactworkshop.slack.com/messages/CK5MP162G/
SLIDES
https://quotecenter.github.io/qc-june-react-event/#/10
Basic Components - Codepen
LESSON
https://codepen.io/adriene_c/pen/pmVwVR
SOLUTION
https://codepen.io/adriene_c/pen/PvejKM
Class Components - Codepen
Lesson: https://codepen.io/adriene_c/pen/pmVwVR
Solution: https://codepen.io/adriene_c/pen/NVebMN?editors=1111
React needs a parent - it can render as many children as it needs but it needs a root.
"
- "
-
works also but div costs memory at render time but react.fragment disappears at run time
or short hand "<> -</>";
hooks is a short hand for classes that sets state without a constructor
useState() - Codepen
Lesson: https://codepen.io/adriene_c/pen/pmVwVR
Solution: https://codepen.io/adriene_c/pen/MdXZpO
useReducer() - Codepen
Lesson: https://codepen.io/adriene_c/pen/pmVwVR
Solution: https://codepen.io/adriene_c/pen/JqwbBa
TESTING
Jest - Javascript test runner
DRY - Don't Repeat Yourself
The more your tests resemble the way your software is used, the more confidence they can give you.- Kent C. Dodds (@kentcdodds) March 23, 2018
TESTING USE CASES
Lesson: https://codesandbox.io/s/writinggoodtestsexercise-zuht3
Solution: https://codesandbox.io/s/writinggoodtestsfinal-symgw?fontsize=14&module=%2Fsrc%2Findex.js&previewwindow=tests
TESTING REACT COMPONENTS
Lesson: https://codesandbox.io/s/reacttestsexercise-g2mfj
Solution: https://codesandbox.io/s/reacttestsfinal-7smqy?eslint=1&fontsize=14&module=%2Fsrc%2FCounterButton.js&previewwin
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
https://codepen.io/stoff/pen/gJdygE
https://codepen.io/stoff/pen/jovRWE
in CSS, wild card selector - *
an * selects everything in the document
CSS COMPONENT APPROACHES
BEM - Block Element Modifier
CSS Modules
CSS in JS
https://codepen.io/stoff/pen/KLBbEv
MINIMUM GLOBAL STYLES
Reset - know our starting point - Meyer reset
https://meyerweb.com/eric/tools/css/reset/
https://cssreset.com/scripts/eric-meyer-reset-css/
Typography - design is based on typography
Box model for responsive layouts
TYPOGRAPHY TO KNOW
Relative Units
Line Height
Rhythm
Typography Examples
https://codepen.io/stoff/pen/JqmjeE
LAYING IT ALL OUT
Block, inline, inline-block
https://codepen.io/gmr_studios/pen/vwvzbR
Flex
https://codepen.io/gmr_studios/pen/NVeLom
Grid
https://codepen.io/gmr_studios/pen/WBLgPB
build in grid as it's in all the major browsers
not so much IE11 or Edge, which suck
grid-template-columns: 100px 6em 1fr;
1fr = 1 fraction
fraction of space that's left in the block after defining sizes
it will fit all based on use of fraction
https://css-tricks.com/introduction-fr-css-unit/
I saw this sticker on someone's laptop, so it's the other lesson for the day. I did not know about this group, but I love it!!
https://outintech.com/
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
- Bloggery committed by chris tower - 1906.01 - 10:10
- Days ago = 1428 days ago
- New note - On 1807.06, I ceased daily transmission of my Hey Mom feature after three years of daily conversations. I plan to continue Hey Mom posts at least twice per week but will continue to post the days since ("Days Ago") count on my blog each day. The blog entry numbering in the title has changed to reflect total Sense of Doubt posts since I began the blog on 0705.04, which include Hey Mom posts, Daily Bowie posts, and Sense of Doubt posts. Hey Mom posts will still be numbered sequentially. New Hey Mom posts will use the same format as all the other Hey Mom posts; all other posts will feature this format seen here.
No comments:
Post a Comment