Skip to content

Added resources from slack #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LemonyDesign wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added resources from slack #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 173 additions & 48 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Shared resources
# Developer resources

## Contributing guide

Expand All @@ -21,6 +21,125 @@
## JS

- [https://eloquentjavascript.net/](https://eloquentjavascript.net/)
> JS bible book
- [Step through code visualiser](https://tylermcginnis.com/javascript-visualizer/)
> ES5 only at the moment

### Methods

- [Does it mutate?](https://doesitmutate.xyz/)
- [Hungarian Dancers demonstrate sort method!](https://www.youtube.com/watch?v=lyZQPjUT5B4&feature=youtu.be)

### Arrays

- [W3 concise list of array methods](https://www.w3schools.com/jsref/jsref_obj_array.asp)

### Objects

### Scope

- [You Don't Know JavaScript Exercises](https://ydkjs-exercises.com/scope-closures/ch1/q1)

> Some people on Reddit got together and made a quiz based on the contents of `You Don't Know JavaScript`.

- [JS Essentials: Objects](https://codeburst.io/javascript-essentials-objects-56373a1a6bfb)

### DOM and Events

### Fetch and AJAX

- [https://github.com/toddmotto/public-apis](https://github.com/toddmotto/public-apis)

### Debugging

- [Debug like a pro](https://itnext.io/10-console-tricks-to-debug-like-a-pro-66ee2225ec57)
> 10 x console tricks `Medium`

### Regex

- [Regex Cheatsheet](https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285)

## React

- [React Cheat Sheet 1](http://www.developer-cheatsheets.com/react)
- [React Cheat Sheet 2](https://devhints.io/react)

- [Beginners guide to React](https://www.youtube.com/playlist?list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS) - 2nd video helps explain what the webpack.config file is doing, afterwards going on to clearly explain building individual components.
- [React Fundamentals](https://medium.freecodecamp.org/these-react-fundamentals-you-skip-may-be-killing-you-7629fb87dd4an) Article on component render, props and state
- NPM packages:

- [shuffle array](https://www.npmjs.com/package/shuffle-array)
- [decode html entities](https://www.npmjs.com/package/he)
`decode("string")`
returns "string"

- [Formik](https://jaredpalmer.com/formik/docs/overview)

## Redux

- [Learn Redux video](https://www.youtube.com/watch?v=Jy-xXB8O12I)
- [Another helpful Redux vid](https://www.youtube.com/watch?v=OSSpVLpuVWA)

- [That gif diagram](https://raw.githubusercontent.com/urunium/Urunium.Redux/master/resources/redux.gif)

- AND… State > mapStateToProps > Component > mapDispatchToProps > Action > Reducer > State

## Testing with Jest

[Jest: Expect matchers](https://jestjs.io/docs/en/expect)

- jest.config.js

```
module.exports = {
testURL: 'http://localhost:8080'
}
```

- Tests with verbose explanations - launch with:

```
npm test -- --verbose
```

## Node

- [Jim's node slides](https://constructorlabs-node-slides.firebaseapp.com/)
- [Nodemon - auto restart node](https://github.com/remy/nodemon)

- Install using `npm install --save-dev nodemon`
- Add entry to the `scripts` object in your `package.json` file:

```
"scripts": {
"start": "nodemon index.js"
}
```

- Start using `npm start`

- [Build Restful APIs using Node and Express](https://www.youtube.com/watch?v=pKd0Rpw7O48)

- [Node Handbook - FreeCodeCamp](https://medium.freecodecamp.org/the-definitive-node-js-handbook-6912378afc6e)

### HTTP status ranges in a nutshell:

- 1xx: hold on
- 2xx: here you go
- 3xx: go away
- 4xx: you fucked up
- 5xx: I fucked up

## Databases

- NB using **Postgres 10**.

> Beware that google will take you to documentation for completely arbitrary versions of postgres -- always click the version number link at the top of the page!

- [Postgres keywords](https://www.postgresql.org/docs/10/sql-keywords-appendix.html)

- [Test DB queries direct in VS Code](https://marketplace.visualstudio.com/items?itemName=ckolkman.vscode-postgres)
> NB not for creating tables

## HTML

Expand All @@ -31,16 +150,17 @@

## CSS

- [http://jxnblk.com/hello-color](http://jxnblk.com/hello-color)
- https://mobbin.design/?ref=producthunt
- [Hello Color](http://jxnblk.com/hello-color)
- [CSS Diner](https://flukeout.github.io/)
- [Coolers](https://coolors.co/)
> Nice colour scheme tool for the aesthetically challenged.
- [Type-Scale](https://type-scale.com/)
- [Dribbble](https://dribbble.com/)
- [https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048](https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)
> Explanation of different css selectors
- [css cheatsheet](https://devhints.io/css)
- [selectors](https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)

### Flex
### Flexbox

- [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [http://flexbox.malven.co/](http://flexbox.malven.co/)
Expand All @@ -53,57 +173,53 @@
- [https://cssgridgarden.com/](https://cssgridgarden.com/)
- [Layout land, real world examples](https://www.youtube.com/watch?v=FEnRpy9Xfes&list=PLbSquHt1VCf1x_-1ytlVMT0AMwADlWtc1)

## Array methods
## Tools

Concise list of array methods with links to usage
- [NPM - list installed](https://docs.npmjs.com/cli/ls)

- [https://www.w3schools.com/jsref/jsref_obj_array.asp](https://www.w3schools.com/jsref/jsref_obj_array.asp)
- [https://doesitmutate.xyz/](https://doesitmutate.xyz/)
- **Webpack**
A word to the wise -- if you are following the 'Starting a new project' guide from the syllabus, your webpack bundle will be created in `/static/bundle.js` rather than `/dist/bundle.js`. You can fix this by replacing the word 'static' with 'dist' within webpack.config.js (edited)

> Does it mutate??
- **Babel**

## Scope
> Stay away from version 7 as it's not compatible with 6, which your currently using.

- [You Don't Know JavaScript Exercises](https://ydkjs-exercises.com/scope-closures/ch1/q1)
- [Prettier and ES Lint - tools for clean coding](https://medium.freecodecamp.org/these-tools-will-help-you-write-clean-code-da4b5401f68e)

> Some people on Reddit got together and made a quiz based on the contents of `You Don't Know JavaScript`.
- [Marrying Prettier and ES Lint](https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a)

## Objects
- [https://docs.emmet.io/cheat-sheet/](https://docs.emmet.io/cheat-sheet/)

## DOM and Events
- [http://tachyons.io/xray/](http://tachyons.io/xray/)

## fetch and AJAX
> rips out colors and applies a grid and borders.

- [https://github.com/toddmotto/public-apis](https://github.com/toddmotto/public-apis)
- [https://prettier.io/](https://prettier.io/)

## React
> Awesome, can't live with out it.

- [React Cheat Sheet](http://www.developer-cheatsheets.com/react)
- [WAVE - Web Accessibility Evaluation Tool](https://wave.webaim.org/)

- [https://www.youtube.com/playlist?list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS](https://www.youtube.com/playlist?list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS) Beginners guide to React - 2nd video helps explain what the webpack.config file is doing, afterwards going on to clearly explain building individual components.
> Evaluates your page to see how accessible it is to things like screen readers.

## Tools
- [WhatFont?](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)

- [https://docs.emmet.io/cheat-sheet/](https://docs.emmet.io/cheat-sheet/)
[http://tachyons.io/xray/](http://tachyons.io/xray/)
> rips out colors and applies a grid and borders.
> Find out what font styles are being used on a page and shamelessly steal them for yourself.

- [https://prettier.io/](https://prettier.io/)
> Awesome, can't live with out it.
- [sizzy.co](https://sizzy.co)

- [WAVE - Web Accessibility Evaluation Tool](https://wave.webaim.org/)
> Evaluates your page to see how accessible it is to things like screen readers.
> For testing responsiveness

- [WhatFont?](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en)
> Find out what font styles are being used on a page and shamelessly steal them for yourself.
- [frontendchecklist.io](https://frontendchecklist.io/)
> The Front-End Checklist Application

- [sizzy.co](https://sizzy.co)
> For testing responsiveness
## Security

- [frontendchecklist.io](https://frontendchecklist.io/)
> The Front-End Checklist Application
- [Cross-origin resource sharing](http://performantcode.com/web/do-you-really-know-cors)

## Performance

- [JS performance issues](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4)

## VS Code

Expand All @@ -113,36 +229,34 @@ Concise list of array methods with links to usage
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [VS Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)
- [Debugger for Chrome ](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
- [VS Code extensions](https://codeburst.io/top-javascript-vscode-extensions-for-faster-development-c687c39596f5)

## Design
## Design, UI and UX

- [Noun project](https://thenounproject.com/)
> Icons for everything
- [Figma wireframs](https://www.figma.com)
- [Form design tips](https://uxdesign.cc/design-better-forms-96fadca0f49c)

- [Figma](https://www.figma.com)
- [Noun project](https://thenounproject.com/)
> Icons for everything

**Free photo galleries**

- [Unsplash](https://unsplash.com)
- [Pixabay](https://pixabay.com)

**Photo editing software**

- [Affinity Photo](https://affinity.serif.com/en-gb/photo/desktop/)
> A much cheaper alternative to Adobe Photoshop, recommened by Jonny
> A much cheaper alternative to Adobe Photoshop, recommened by Jonny

**Logo generator**
- [Logo Joy](https://logojoy.com/explore)

## UX

- [Form design tips](https://uxdesign.cc/design-better-forms-96fadca0f49c)

## Regex

- [Regex Cheatsheet](https://medium.com/factory-mind/regex-tutorial-a-simple-cheatsheet-by-examples-649dc1c3f285)

- [Logo Joy](https://logojoy.com/explore)

## Git

[Oh shit, git!](https://ohshitgit.com/)

**Resetting code to last commit** - this will abandon any changes and load code as it was at last commit

- `git reset head --hard`
Expand All @@ -153,7 +267,18 @@ Concise list of array methods with links to usage

For example running `git clone git@github.com:constructorlabs/shared-resources.git my-resources` will create a folder called `my-resources` inside current folder and clone `shared-resources` repo into the folder.

**[Learn Git Branching](https://learngitbranching.js.org/)**

## Markdown

- [Markdown formatting](https://guides.github.com/features/mastering-markdown/)

- [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)

## Interesting…

[Commented dead code and what to do with it](https://dev.to/damnjan/dead-code---alive-problem-2job)

[State of JS 2018](https://2018.stateofjs.com/introduction)

[Guide to becoming a dev 2018](https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d)