papistan/frontendtrivia

Flip through decks of trivia cards | frontendtrivia.com | quickly discover concepts for further study

frontendtrivia's Issues

HTML questions / answers (20-30)

Add questions and answers that might test core HTML concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Example of question types / length

Add, Edit or Update Front End Related Questions for FrontEndTrivia.com - JS, CSS, HTML, React, Git

Help us to Add, Edit or Update questions and answers related to the main issues a new Front End Developer should know / consider - here - submit pull request.

CSS questions / answers (20-30)

Add questions and answers that might test core concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Example of question types / length

Users / login feature

Problem - We cannot add additional user-focused features ( for example: custom deck feature, missed cards deck, email yourself missed questions) until we have user capability. Therefore, we need database, user model for account, and signup, login / logout views.

Potential solution
A user may sign up, login and out and have account for storage of their custom decks, etc once features built.

• User model in node (email, username, encrypted password ).
• Login / logout at top right of screen. When logged out, login/signup button shows. When logged in, username shows.

Note on design: I have not created a user feature with ReactJS or Node (only react-native with Firebase for user accounts), so I'm looking for someone who has experience or willing to explore to best advise on design.

Add new deck 'CSS: Animations'

Create new deck titled 'CSS: Animations' - and add questions and answers (no limit on # really) Fill in here and submit pull request.

For reference, concepts found here: https://css-tricks.com/almanac/properties/a/animation/

Add Intermediate-level JavaScript questions / answers

Create a new deck titled 'Javascript: Intermediate' - and add questions and answers (no limit on # really) that might test mid-level concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Some potential references:

• http://www.thatjsdude.com/interview/js2.html
• https://github.com/khan4019/front-end-Interview-Questions#javascript-for-intermediate-level-developer

Add new deck titled 'Javascript: Design Patterns'

Create new deck titled 'Javascript: Design Patterns' - and add questions and answers (1-2 sentences max) that help to introduce basic concepts of different design patterns (no limit on # really) Fill in here and submit pull request.

This is difficult to boil down into flash cards, but at least some basic info would be good.
One reference to use may be (though very long):
Learning JavaScript Design Patterns

Add new deck of jQuery related questions / answers

Add a new deck labeled 'jQuery: Basics' and add questions and answers that might test core jQuery concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Add deck here at end and submit pull request.

Example of question types / length

difference between "==" and "==="

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• **I'm submitting a ... **

  • [ x] bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug?

• What is the current behavior?

The answer provided says : "triple equal uses type coercion and compares value and types..."

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

• What is the expected behavior?

The answer should be : "triple equal does NOT use type coercion"

• What is the motivation / use case for changing the behavior?

• Please tell us about your environment:

• version: 2.0.0-beta.X
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
• Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Can I try a pull request for this? I would like to learn how to make contributions ... :)

Add Flexbox questions / answers

Create a new deck titled 'CSS3 Flexbox' - and add questions and answers that might test core concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Example of question types / length

Create a list of all current decks

Check out the decks of Q&A cards here .
We need a commented out list of all deck titles at the top (for ease of finding them until we can refactor design.)

Add the following:

1. commented out list of all deck titles at top of file - Fill in here
2. Add list of current decks to readme under new section

Add new deck titled 'SASS: Basics'

Create new deck titled 'SASS: Basics' - and add questions and answers (no limit on # really) Fill in here and submit pull request.

For reference, concepts found here: http://sass-lang.com/guide or some other good question and answer format for basics

Add new deck to capture missed trivia cards

Would like to create a deck of cards user has marked 'missed' with red button. As user goes through cards, missed ones are thrown into this deck all together. They can then review at any time.

Not sure where the deck would sit on the page, but thinking at top of deck list.

Add new ‘Git’ deck with questions / answers

Add a new deck titled “Git”, image and questions and answers related to good git workflow, including common best practices, commands, etc here

Potential resources list here: https://help.github.com/articles/git-and-github-learning-resources/

Please add an open source and optimized image under styles/images, also. Finally update the deck list at top of file and also readme.

Add new 'Javascript: ES8' deck

Add a new deck, image and questions and answers related to new developments within Javascript ES8 here .

Potential resource for questions here

No Angularjs questions

'SASS: Basics' deck needs more questions / answers

Add to deck titled 'SASS: Basics' with additional questions and answers (no limit on # really) Fill in here and submit pull request.

For reference, concepts found here: http://sass-lang.com/guide or some other good question and answer format for basics

Add new deck 'Javascript: Common event handlers'

Add new deck 'Javascript: Common event handlers' - and add questions and answers (no limit on # really) Fill in here and submit pull request.

For example: from https://www.xul.fr/javascript/cheat-sheet.php

onAbort loading stopped
onBlur focus lost
onChange content modified
onClick clicked
onDblClick clicked twice
onDragDrop moved
onErrornot loaded
onFocus focus entered
onKeyDown key depressed
onKeyPress key pressed
onKeyUp key released
onLoad just after loading
onMouseDown mouse button depressed
onMouseMove mouse moved
onMouseOut mouse exited
onMouseOver mouse on the element
onMouseUp mouse button released
onReset reset form button clicked
onResize size of page changed
onSelect element selected
onSubmit submit form button clicked
onUnload

No ReactJS questions

Add questions and answers that might test core React concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Example of question types / length

Add new ‘Bootstrap: Basics’ deck with questions / answers

Add a new deck, image and questions and answers related to core bootstrap concepts here .

Please add an open source and optimized image under styles/images, also. Finally update the deck list at top of file and also readme.

Add Vue.js questions / answers

Add questions and answers that might test core Vue concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here under 'Vue' deck and submit pull request.

Example of question types / length

Add DOM questions / answers

Create a new deck titled 'Javascript: DOM' - and add questions and answers (no limit on # really) that might test DOM manipulation-related concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Some potential references for inspiration:

• http://www.thatjsdude.com/interview/dom.html

Add Git workflow trivia questions / answers

Add questions to deck titled “Git” related to good git workflow, including common best practices, commands, etc here

Potential resources list here: https://help.github.com/articles/git-and-github-learning-resources/

Don't add node_modules to your git repository

Happy to help. Hacktoberfest tag would be appreciated! :)

Add to 'CSS: Pseudo-classes' deck with questions / answers

Add questions to deck titled 'CSS: Pseudo-classes' (no limit on # really) Fill in here and submit pull request.

For reference, concepts found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Add ES6 questions / answers

Create a new deck titled 'Javascript: ES6' - and add questions and answers that might test core concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

This deck should test concepts focused on features of ES6, for example:

• Default Parameters
• Template Literals
• Multi-line Strings
• Destructuring Assignment
• Enhanced Object Literals
• Arrow Functions
• Promises
• Block-Scoped Constructs Let and Const
• Classes
• Modules

Example of question types / length

Move deck objects from reducer to alternative (json?) file

As suggested by @Gangezilla , all deck objects are currently held in this reducer , which is not ideal. Would be great to have someone move to a json file or alternative. Please test and submit pr, thanks

Add more JavaScript commonly-used built-in methods

Add additional commonly used built in methods to deck titled 'Javascript: Common built-in methods' - and add questions and answers (no limit on # really) Fill in here and submit pull request.

For reference (though some may exist already so please check, thanks): from https://www.xul.fr/javascript/cheat-sheet.php

String methods

charAt() character at the given position
charCodeAt() code of a character
concat() concatenate with the argument
indexOf() position of a character
lastIndexOf() position from the end
localeCompare() localized comparison
matchapply a regular expression()
replace() replace a substring
search() search a substring
slice() extract a part
split() cut to build an array with parts
substring() extract a part
toLowerCase() convert to lowercase
toUpperCase() convert to uppercase
toLocaleLowerCase() localized lowercase
toLocaleUpperCaselocalized uppercase ()

Array, index and methods

a["one"]=1 assignment by indice
a.one=1 assignment by attribute
delete a["one"] deletion by indice
delete a.one deletion by attribute
for(var k in a) {} iteration on the content
concat() add a second array
join() concatenate the elements into a string
push() add an element
pop() get and remove the last element
reverse() invert the order of elements
shift() insert an element at start
slice() extract a sub-array
spliceinsert an array ()
sort() sort the elements
toString() return the array as a string
unshift() get and remove the first element

Replace jQuery and W3c images

The jQuery image and W3 are not optimal in deploy state. We need someone to find open source images and replace them (after testing locally and running image optimizer please :) ).

Add new deck titled 'CSS: Pseudo-classes'

Create new deck titled 'CSS: Pseudo-classes' - and add questions and answers (no limit on # really) Fill in here and submit pull request.

For reference, concepts found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Scope out basic structure for API backend

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• **I'm submitting a ... **

  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug?
  Feature request: Need to scope out a basic structure for API backend that the frontend can use. It should also be relatively easy to work with so others can contribute to it.

• What is the motivation / use case for changing the behavior?
  Currently, the questions are statically served. There isn't an API that the frontend queries for questions. Additionally, to make the app more robust (e.g. user info), some type of database will be needed.

Upgrade project dependencies

• **I'm submitting a ... **

  • bug report

• What is the current behavior?
  webpack -p doesn't compile

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  Having
  node -v => v8.6.0
  npm -v => 5.3.0

1. Clone the repository.
2. Run npm install

ERROR in ./src/index.js
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/Users/username"

• What is the expected behavior?
  Compiling the project correctly

Is somebody else experiencing this error?

Add Front End Dev-focused questions and answers

Check out the decks of Q&A cards here . What are we missing?

Create a new deck and add questions and answers that might test core Front End concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Example of question types / length

Add new deck 'Webpack: Basics' with questions and answers

What are the basic concepts of Webpack a developer should know? Can you boil these down into digestible 1-2 sentence questions and answers?

Add new deck titled 'Webpack: Basics' - and add, image to images folder, questions and answers (no limit on # really) Fill in here and submit pull request.

Potential resource here

Add questions / answers to 'Javascript: Foundations' deck

Add questions / answers to 'Javascript: Foundations' deck - (no limit on # really) that might test core concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Some potential references:

• https://h5bp.github.io/Front-end-Developer-Interview-Questions/#js-questions
• concepts from David Shariff:
  Execution context, especially lexical scope and closures.
  Hoisting, function & block scoping and function expressions & declarations.
  Binding – specifically call, bind, apply and lexical this.
  Object prototypes, constructors and mixins.
  Composition and high order functions.
  Event delegation and bubbling.
  Type Coercion using typeof, instanceof and Object.prototype.toString.
  Handling asynchronous calls with callbacks, promises, await and async.
  When to use function declarations and expressions.

Add new deck ‘LESS: Basics’ with questions and answers

Add a new deck, image and questions and answers related to core LESS concepts here .

Please add an open source and optimized image under styles/images, also. Finally update the deck list at top of file and also readme.

Add basic jQuery questions / answers

Add a new questions / answers to deck labeled 'jQuery: Basics' - that might test core jQuery concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Add to deck here and submit pull request.

Example of question types / length

Update Contributing.md

In contributing.md, under enforcement section, there is requirement to put team's email address. I would have implemented that in my next PR(JS questions), but that would require mail id that is to be added there.
Also list of contributors can be updated ;)

Add new deck ‘Cross-Browser Compatability’ with questions / answers

Add a new deck, image and questions and answers related to the main issues a new developer should know / consider related to cross-browser compatibility concepts here .

Please add an open source and optimized image under styles/images, also. Finally update the deck list at top of file and also readme.

Add React.js questions / answers

Add questions and answers that might test core React concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here and submit pull request.

Example of question types / length

Add advanced JavaScript questions & answers

Add questions and answers that might test advanced JavaScript concepts and mimic questions that might be asked in phone screens. Should be concise enough to fit into 1-2 sentences. Fill in here under 'JavaScript: 3' deck and submit pull request.

Example of question types / length

Need suggestions for improvement

Check out progress so far: https://frontendtrivia.herokuapp.com/

Besides issues listed currently, what else do you think would make this useful for a new front end developer preparing for interviews and exposing themselves to new / core concepts? Please list in comments below.

Also, what good forums do you know of to reach front end developers?

Thanks!