├── .github └── FUNDING.yml ├── CONTRIBUTING.md ├── README.md ├── cssSpecificity.md ├── gracefulDegradation.md └── treeShaking.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: charliegerard 2 | ko_fi: devdevcharlie 3 | custom: ["https://buymeacoffee.com/devdevcharlie"] 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Please feel free to create pull requests to add additional questions or information to the repository. Do understand however that this does not guarantee the request to be accepted and the owner has the right to choosing what content to add to this repository. If you are unsure about whether or not to add content, please create an issue to open discussion to confirm the request will be approved. 4 | 5 | If you would like to see certain topics discussed or see questions around a particularly area, please feel free to create an issue and discuss. This will create visibility for the owner and other contributers to help add more information. 6 | 7 | Please treat every interaction in this repository with the respect and remember people are here looking for help, see the Code of Conduct below for further details. 8 | 9 | ## Pull Request Process 10 | 11 | The only steps required to create a pull request are to fork the repository, make changes and most importantly, be sure to discuss your changes in the request back to the parent repository. 12 | 13 | ## Code of Conduct 14 | 15 | ### Our Pledge 16 | 17 | In the interest of fostering an open and welcoming environment, we as 18 | contributors and maintainers pledge to making participation in our project and 19 | our community a harassment-free experience for everyone, regardless of age, body 20 | size, disability, ethnicity, gender identity and expression, level of experience, 21 | nationality, personal appearance, race, religion, or sexual identity and 22 | orientation. 23 | 24 | ### Our Standards 25 | 26 | Examples of behavior that contributes to creating a positive environment 27 | include: 28 | 29 | * Using welcoming and inclusive language 30 | * Being respectful of differing viewpoints and experiences 31 | * Gracefully accepting constructive criticism 32 | * Focusing on what is best for the community 33 | * Showing empathy towards other community members 34 | 35 | Examples of unacceptable behavior by participants include: 36 | 37 | * The use of sexualized language or imagery and unwelcome sexual attention or 38 | advances 39 | * Trolling, insulting/derogatory comments, and personal or political attacks 40 | * Public or private harassment 41 | * Publishing others' private information, such as a physical or electronic 42 | address, without explicit permission 43 | * Other conduct which could reasonably be considered inappropriate in a 44 | professional setting 45 | 46 | ### Our Responsibilities 47 | 48 | Project maintainers are responsible for clarifying the standards of acceptable 49 | behavior and are expected to take appropriate and fair corrective action in 50 | response to any instances of unacceptable behavior. 51 | 52 | Project maintainers have the right and responsibility to remove, edit, or 53 | reject comments, commits, code, wiki edits, issues, and other contributions 54 | that are not aligned to this Code of Conduct, or to ban temporarily or 55 | permanently any contributor for other behaviors that they deem inappropriate, 56 | threatening, offensive, or harmful. 57 | 58 | ### Scope 59 | 60 | This Code of Conduct applies both within project spaces and in public spaces 61 | when an individual is representing the project or its community. Examples of 62 | representing a project or community include using an official project e-mail 63 | address, posting via an official social media account, or acting as an appointed 64 | representative at an online or offline event. Representation of a project may be 65 | further defined and clarified by project maintainers. 66 | 67 | ### Enforcement 68 | 69 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 70 | reported by contacting the project team at charlie.a.gerard@gmail.com. All 71 | complaints will be reviewed and investigated and will result in a response that 72 | is deemed necessary and appropriate to the circumstances. The project team is 73 | obligated to maintain confidentiality with regard to the reporter of an incident. 74 | Further details of specific enforcement policies may be posted separately. 75 | 76 | Project maintainers who do not follow or enforce the Code of Conduct in good 77 | faith may face temporary or permanent repercussions as determined by other 78 | members of the project's leadership. 79 | 80 | ### Attribution 81 | 82 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 83 | available at [http://contributor-covenant.org/version/1/4][version] 84 | 85 | [homepage]: http://contributor-covenant.org 86 | [version]: http://contributor-covenant.org/version/1/4/ 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :mortar_board: Mock interview questions for junior developers 2 | 3 | I sometimes run mock interviews for junior developers and here are some of the questions I ask. 4 | Some of these questions are more advanced than a junior level but I think it's always good to be exposed to unknown terms & concepts, even if it's to simply get comfortable with saying **"I don't know"** :). 5 | 6 | They may not be asked in a real interview and may not be expected of you as a junior/grad but: 7 | 8 | 1. We never know. 9 | 2. The more you know, the better! :) 10 | 11 | Some of these questions link to a README with an explanation. 12 | 13 | I'll keep updating this list as I learn more myself and feel free to contribute and add extra questions by submitting a pull request. See the [CONTRIBUTING](CONTRIBUTING.md) guide for more detailed information. 14 | 15 | # :information_desk_person: General 16 | * What do you like about programming? (Passion indicator) 17 | * Could you explain the concept of microservices? 18 | * How do you go about learning something new? 19 | * How do you stay up to date with technology and programming? (Interviewer wants to be comfortable that your skillset will continue to stay current in regards to the role. Do answer honestly including sources like blogs, forums, books or courses.) 20 | * How do you feel about testing? 21 | * Can you cite different types of testing. 22 | * What is the next thing you'd like to learn? 23 | * What have you built that you are most proud of? (Interviewer is looking to hear about your passion for programming and give you a chance to talk about specific technologies or methodologies you've used recently) 24 | * Can you explain what it means when a framework uses a `convention over configuration` approach? 25 | * What is functional programming? 26 | * What is object-oriented programming? 27 | * What are two programming languages you know well? How are they similar? How are they different? What are some examples of times you would use each of them over the other? (Interviewer wants to know if you understand programming languages at a deep level, and if you are thoughtful about your choice of tools) 28 | * (Roleplay) You've come across an error that doesn't have an obvious solution while writing a program, explain what steps you would take in trying to resolve it. (Interviewer wants to get an understanding of your problem solving approach, try to give more details than "google it" or "ask for help") 29 | * Describe the agile approach to software development. 30 | * What is the difference between function declaration and function definition ? 31 | 32 | # :art: Front-end 33 | 34 | * [What is CSS specificity?](cssSpecificity.md) 35 | * Are you familiar with CSS modules? 36 | * What is your favorite React.js feature and why? 37 | * [What is graceful degradation and progressive enhancement?](gracefulDegradation.md) 38 | * What is your favorite front-end framework and why? 39 | * Can you explain one new feature in ES6? 40 | * Give me 3 ways to optimise the loading performance of a website. 41 | * Can you explain how you organise your CSS for responsiveness? 42 | * [What is tree shaking?](treeShaking.md) 43 | * What is hoisting? 44 | * Can you cite at least one way to improve a website for accessibility? 45 | * Can you explain event delegation in JavaScript? 46 | * Can you explain how the event loop works? 47 | * What is the difference between == and === in JavaScript? 48 | * What do people mean when they talk about Single Page Applications (SPAs)? And what are the benefits/downsides of this approach? 49 | * What is the purpose of using a templating language like HAML? 50 | * What is closure in JavaScript and what is its use ? 51 | * What is the difference between `.map` and `.forEach`? 52 | * Does JS pass by value or by reference? 53 | * How do you create a DOM element in vanilla JS? 54 | * Difference between GET and POST? 55 | * Difference between inline, inline-block, block elements? 56 | * What is the data structure of the DOM? 57 | 58 | # :nut_and_bolt: Back-end 59 | 60 | * What is the difference between a document store and a relational database? 61 | * What is the MVC (Model-View-Controller) architectural pattern? 62 | * What is CORS (Cross-Origin Resource Sharing) and what is responsible for? 63 | * What is a 500 HTTP error and what does it mean? 64 | * What is the difference between `PUT` and `POST` on a REST interface? 65 | * What is the fastest way to iterate? 66 | * What is premature optimization? 67 | * How do you personally debug backend code? 68 | 69 | # :question: Good questions to ask 70 | 71 | * What does a typical work week look like? (Gives you a quick sense of what to expect in terms of pace and responsibility) 72 | * Will I have the opportunity for pair programming and working with seniors? If so, how often can I expect it? 73 | * How long / time frame do you see me getting up to speed with your current codebase & workflow ? 74 | * In your view, what would you consider as a successful new hire ? 75 | * What ways would I be expected to contribute after 3 months / 6 months / 12 months ? 76 | * (If not specified) What technology stack does this product use? (or at an agency, what tehcnology stacks are favoured) 77 | * How often are deployments made to production? (This will give you a sense of how fast-moving the team is) 78 | * Is there an allocated budget for learning materials or attending conferences? (Shows company priorities and employee value) 79 | * Is there a formal performance review process and how often does it happen? 80 | * Do we have monthly / weekly catchups? (If no catchups, suggest if you could have regular catch ups) 81 | * How do you deal with "that person", the one you don't get along with? 82 | 83 | See more [here](https://github.com/twipped/interviewthis)! 84 | 85 | 86 | # :gear: General Techniques 87 | 88 | * If you find yourself getting lost during coding exercises, try splitting your solution into two parts: Sketch out the solution in any way that makes sense to you (e.g. pseudo-code or natural language), then code that solution. This technique can let you focus on solving separately from coding and spread out the cognitive load. 89 | 90 | # :clipboard: Practice 91 | 92 | * [Exercism](http://www.exercism.io/) 93 | * [CodeWars](https://www.codewars.com/) 94 | * [Project Euler](https://projecteuler.net/) 95 | * [CodeKata](http://codekata.com/) 96 | * [HackerRank](https://www.hackerrank.com/dashboard) 97 | * [CoderByte: Challenges](https://coderbyte.com/challenges) 98 | * [RosettaCode](http://rosettacode.org/wiki/Rosetta_Code) 99 | * [FreeCodeCamp](https://www.freecodecamp.org/) 100 | * [HackerEarth](https://www.hackerearth.com/fr/practice/) 101 | * [TopCoder](https://www.topcoder.com/challenges/?pageIndex=1) 102 | * [LeetCode](https://leetcode.com/problemset/all/) 103 | * [CodeChef](https://www.codechef.com/) 104 | * [IDeserve](https://www.ideserve.co.in/) 105 | * [Google CodeJam](https://code.google.com/codejam/past-contests) 106 | * [CodeGolf](https://codegolf.stackexchange.com/) 107 | * [IDeserve](https://www.ideserve.co.in/) 108 | * [Rosalind](https://projecteuler.net/) 109 | * [Quizful](https://quizful.com/) 110 | 111 | # :notebook: Additional resources 112 | 113 | Some other repositories can be found with interview questions: 114 | 115 | * [HTML5 Boilerplate: Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 116 | * [Maxim Abramchuck: Awesome Interview Questions](https://github.com/MaximAbramchuck/awesome-interview-questions) 117 | * [VVSCode: JS Interview Questions](https://github.com/vvscode/js--interview-questions) 118 | * [Yangshun: Front-end Interview Handbook](https://github.com/yangshun/front-end-interview-handbook) 119 | * [Yangshun: Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) 120 | * [Arialdo Martini: Back-end Developer Interview Questions](https://github.com/arialdomartini/Back-End-Developer-Interview-Questions) 121 | * [Khan4019: Front-end Interview Questions](https://github.com/khan4019/front-end-Interview-Questions) 122 | * [JavaScript Scene: 10 Interview Questions Every JavaScript Developer Should Know](https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95) 123 | * [Wwwebman: Front-end Interview Questions](https://github.com/wwwebman/front-end-interview-questions) 124 | * [Kennymkchan: Interview Questions in JavaScript](https://github.com/kennymkchan/interview-questions-in-javascript) 125 | * [That JS Dude: Interview](http://thatjsdude.com/interview/index.html) 126 | * [Interview Cake: JavaScript Interview Questions](https://www.interviewcake.com/javascript-interview-questions) 127 | * [Perfection Kills: ES6 Quiz](http://perfectionkills.com/javascript-quiz-es6/) 128 | * [David Shariff: Quiz](http://davidshariff.com/quiz/) 129 | * [David Shariff: JS Quiz](http://davidshariff.com/js-quiz/) 130 | * [O2JS: JavaScript Interview Questions](https://o2js.com/assets/javascript-interview-questions.pdf) 131 | * [HackerRank: Cracking the Code Interview](https://www.hackerrank.com/domains/tutorials/cracking-the-coding-interview) 132 | * [W3 Resource: JavaScript Exercises](https://www.w3resource.com/javascript-exercises/) 133 | * [Jwasham: Coding Interview University](https://github.com/jwasham/coding-interview-university) 134 | -------------------------------------------------------------------------------- /cssSpecificity.md: -------------------------------------------------------------------------------- 1 | # CSS Specificity 2 | 3 | **How browsers decide which CSS property values should be applied on an element.** 4 | A weight that is applied to a given CSS declaration. 5 | 6 | Inline styles added to an element always overwrite any styles given in an external stylesheet. They have **highest specificity**. 7 | 8 | The `!important` rule overrides any other declarations. 9 | 10 | ```css 11 | #parent { 12 | color: green; 13 | } 14 | 15 | h1{ 16 | color: purple; 17 | } 18 | ``` 19 | 20 | ```html 21 | 22 | 23 |

Here is a title!

24 | 25 | 26 | ``` 27 | 28 | The h1 will be purple. 29 | 30 | --- 31 | 32 | ### **As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.** 33 | -------------------------------------------------------------------------------- /gracefulDegradation.md: -------------------------------------------------------------------------------- 1 | # Graceful Degradation vs. Progressive Enhancement 2 | 3 | The most recent browsers can now support technologies like 3D graphics or innovative APIs like Web Bluetooth but not everyone updates their browsers to the latest versions, making the websites developers build sometimes inaccessible. 4 | Graceful degradation and Progressive enhancement are two ways that attempt to solve this problem. 5 | 6 | ## Graceful degradation 7 | 8 | This solution represents the practice of building a website or application that provide a good level of user experience in modern browsers, but will also degrade gracefully in older browsers. 9 | Example with the use of CSS3 animations. If a specific transition is supported in Chrome but not IE, the element targeted will be animated in Chrome but will be static in IE. 10 | 11 | ## Progressive Enhancement 12 | 13 | This technique is a bit similar but goes the opposite way. The website or application would be built to provide a base level of user experience for most browsers and would provide more advanced functionalities if the browser supports it. 14 | -------------------------------------------------------------------------------- /treeShaking.md: -------------------------------------------------------------------------------- 1 | # Tree Shaking 2 | 3 | **Tree shaking** is a term commonly used in JavaScript to describe the **removal of dead code**. 4 | 5 | It relies on **import** and **export** statements in ES6 to determine which modules are imported and exported between files. 6 | 7 | Tree shaking starts from entry points and only includes the code that can ever be executed. 8 | 9 | To remove dead code, we need to use tools such as **Webpack** and **UglifyJS**. 10 | 11 | Example: 12 | 13 | src/utils.js 14 | 15 | ```javascript 16 | export function add(a,b){ 17 | return a + b; 18 | } 19 | 20 | export function multiply(a, b){ 21 | return a * b; 22 | } 23 | ``` 24 | 25 | src/index.js 26 | 27 | ```javascript 28 | import { add } from utils.js; 29 | 30 | function main(){ 31 | add(1, 2); 32 | } 33 | ``` 34 | 35 | In the `main.js` file, we only imported `add` from the file `utils.js`, so the function `multiply` is dead code. 36 | 37 | If we have a basic Webpack setup to bundle our files, after running `npm run build`, we can see the output bundle look something like this: 38 | 39 | ```javascript 40 | /* 1 */ 41 | /***/ (function(module, __webpack_exports__, __webpack_require__) { 42 | 43 | "use strict"; 44 | /* unused harmony export multiply */ 45 | /* harmony export (immutable) */ __webpack_exports__["a"] = add; 46 | function add(x, x){ 47 | return x + x; 48 | } 49 | 50 | function multiply(x, x){ 51 | return x * x; 52 | } 53 | ``` 54 | 55 | If you look above, you can see that the function `multiply` is not being exported, however, it is still present in the bundle. 56 | 57 | This can be fixed by using tools like **UglifyJS** that will minify the code and remove the dead code from the final bundled file. 58 | 59 | **Webpack by itself does not perform tree shaking, it needs tools like UglifyJS to perform actual dead code elimination.** 60 | 61 | In "compiled" languages like C++, an optimizing linker can automatically remove code. 62 | --------------------------------------------------------------------------------