Skip to content

contents to act as centralised source of listing all the coderAcademy exercises done and descriptions of what was covered

Notifications You must be signed in to change notification settings

developingAlex/contents

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 

Repository files navigation

Coder academy exercises

List of exercises worked through in class and what was covered in them. A quick reference for when I can't remember in what exercise a particular competency was covered (there was a lot)

(a lot of the rails exercises I haven't yet put on github, though git was used at the time, I will work on adding them whenever I have a spare moment)

Javascript

  • CodePen exercise - coding react-like functionality from scratch (watch the case-sensitivity on those javascript method names!)

NodeJS & Express & MongoDB

  • Uses an api to pull appropriate data for a given input (postcodes)
  • demonstration of dynamically changing css values (eg. about page header colour changes to whatever is entered in the url: localhost:7000/aboutred or localhost:7000/aboutblue etc
  • demonstration of different mimetypes in json responses
  • JSON stringify
  • introduces REST client VS Code extension and .http file for request testing
  • serving up a wombat gif
  • notes on running a server from a home pc which is accessible externally
  • introduces model validations
  • CRUD
  • Nodemon
  • routes and routing
  • first React
  • commands to initially install react on your computer
  • Customising browser for react debugging
  • Sending parameters to components to determine what they give you back
  • React
  • practice making html components - components that implement the css library bootstrap
  • intro to components so some information regarding them from pat in the code comments

emoji-dos2 - 20171128

  • React
  • a todo list that uses emojis and logic to indicate number of oustanding todos
  • splits the todo list into two separate lists (in order to appear as though the list is being sorted) and just 'hides' corresponding entries from each list such that only the completed entries appear in one list, and only the incomplete entries appear in the next list, though both iterate over the same array of entries.
  • programmed to be more functional, immutative.
  • Callbacks and function passing
  • introduces components for UI elements
  • React
  • demonstrates form usage to tie together two separate elements (image url input field and button).
    • If the field for the image url was programmed the same as the name fields it would have attempted to load an image for every alteration of a character in that field as the user typed, I wanted it to not do that as it would break the image as soon as the user started typing. I wanted instead for there to be a button they could click once they were finished typing in the url to their avatar image.
    • Original implementation had the button not tied to the input element in any way. The button invoked a method which then went and retrieved the value of the element's current state.
    • the subsequent implementation had the button and the input field tied together in a form. in that way when the button was pressed, the form was submitted, and the value of the input element was retrieved from the one bit of data that came through on the form submission.
    • this approach is considered better than the original (though not as obvious in this situation) as it helps to encapsulate the information that is being worked with. As opposed to going and trying to read the current state of distinct elements, which could get messy if problem got more complex than this example.
  • user declaration 'syntax sugar' example
  • introduces internal state
  • React
  • Using stock quote api
  • Axios for http requests
  • distinctions between 'get' and 'fetch'
  • first time use of componentDidMount
  • event handlers
  • notes on pitfalls passing data through to components
  • using && to conditionally render elements
  • notes on arrays in state
  • rendering with .map
  • notes on return statement restrictions
  • React
  • Node.js
  • how to get up and running one of these nodjs react apps if you cloned it.
  • app behaves like an api responding to URL requests with appropriate data.
  • MongoDB seed
  • distinct backend and frontend folders
  • gitignore
  • validators in models
  • yarn scripts
  • model attributes defaults
  • seed file code techniques
  • mongoDB mongoose operators to return a range
  • mention of lodash
  • process.exit
  • React
  • handling authentication in Node with Passport
  • handling authorization with JWT
  • authentication Middleware
  • linking up of React frontend with Node.js backend
  • used cors to get around frontend server to backend server communication issues
  • Used the populate method to get the object referenced by the attribute of another object
  • covers database object relationships
  • Discusses the MongoError: E11000 duplicate key error collection
  • implements CRUD functionality
  • "how to run" instructions in README
  • MongoDB seed file
  • package.json file has good example of yarn scripts
  • Mongo terminal db querying and maintenance commands
  • 'Inclusive Design Patterns' book mention
  • When to use curly braces in import statements
  • Reading the url path with react-router-dom
  • Prettier VS Code plugin
  • Double arrow functions!
     const requireAuth = (render) => (props) => (
       signedIn ? (
         render()
       ) : (
         <Redirect to='signin' />
       )   
     )
  • Explanation of import statements and curly braces
  • before_action authenticate_user type functionality in ReactJS
  • Redirect by React
  • Lazy loading
  • <Switch>
  • Useful technologies:
    • bundlephobia.com for anything you yarn add and it will tell you how big that library is.
    • unpkg.com was shown as an example of minifying the javascript "minification"
    • github.com/developit microbundle
    • github.com/insin/nwb
    • The javascript quirks table
  • Environment variables
    • in React
    • in Node | Express
    • .env
  • @variables
  • Deploying a Mongo | React | Node app on the internet
    • now from zeit.co/now
    • mlab.com
    • Building a React app - npm run build
    • Netlify page redirects (/* /index.html 200 & _redirects file)

About

contents to act as centralised source of listing all the coderAcademy exercises done and descriptions of what was covered

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published