The question "How can you avoid callback hells?" is displayed in both the Javascript and Node sections. Since it's a general Javascript issue it doesn't really need to be in the Node section anyway.

When the file is saved in a text editor the page is hot-reloaded to preserve Hyperapp's state and the console comes up with a bunch of errors and a bunch of elements don't get rendered. I've had similar problems in multiple different projects and I'm not sure why.

@flxwu any help?

I think Prettier alone is fine (no standard/semi-standard) with the default settings but without semicolons 😜

This is the standard Hyperapp style which I always use now.

Why no semicolons?

They're visual noise, mostly unnecessary. There are very few cases in which they are required, and once you understand them it's fine (or use prettier-on-save which does it for you)

Why double quotes?

Single quotes were often preferred when injecting HTML in a string, but we don't do that here. Additionally we're using JSX which intersperses HTML inside JS and we use double quotes as that's the HTML standard. JSON requires double quotes. etc etc. IMO strings also look more "stringy" with double quotes. I just used it then 🌚

Why tab-size=2?

It's generally accepted as the JS default. I've seen people do 8 which is crazy... 4 kind of makes sense though.

Why bracket-spacing=true?

I'm not really sure on this one tbh. Arrays do not have spacing:

[1, 2, 3]

But objects do:

{ a: 1, b: 2, c: 3 }

Many people don't use bracket spacing for objects now, but I feel like the curly bracket "eats" the property key without it. Undecided here.

Why print-width=80?

• I noticed on my smaller laptop (13") that 100 print-width caused horizontal overflow, so I've decided on 80 now.

The question css-sibling-selectors seems to give a partially wrong answer.

As per W3C spec, the ~ (tilde) combinator does not work the way it's described in the answer. Instead, it's almost the same as the + combinator except that the element following the combinator doesn't have to be placed immediately after the one before the combinator.

On a side note, the W3C seems intent on changing the combinator names, in fact this appears to have happened already in the currently active level 3 spec. The general sibling combinator (~) was renamed to subsequent-sibling combinator and the adjacent-sibling combinator (+) changed to next-sibling combinator. One might consider using these names as well.

react 16.7 (currently in alpha) introduced hooks, which allows to use state in non-class components
resource: https://reactjs.org/docs/hooks-intro.html

Found a typo here:

https://github.com/30-seconds/30-seconds-of-interviews/blob/28a0112012e54be2d2167d2a9bbd7ee3bd8d2d92/questions/fragments.md

Can I fix?

The code can't work by calling

isDeepEqual(1, 2)

This is my answer:

function isDeepEqual(obj1, obj2, testPrototypes = false) {
    if (obj1 === obj2) {
        return true;
    }
    if (type(obj1) === 'Function' && type(obj2) === 'Function') {
        return obj.toString() === obj2.toString();
    }
    if (type(obj1) === 'Date' && type(obj2) === 'Date') {
        return obj1.getTime() === obj2.getTime();
    }
    
    if (type(obj1) !== type(obj2) || type(obj1) !== 'object') {
        return false;
    }

    const prototypesAreEqual = testPrototypes
        ? isDeepEqual(
            Object.getPrototypeOf(obj1),
            Object.getPrototypeOf(obj2),
            true
        )
        : true;

    const obj1Props = Object.getOwnPropertyNames(obj1);
    const obj2Props = Object.getOwnPropertyNames(obj2);

    return (
        obj1Props.length === obj2Props.length &&
        prototypesAreEqual &&
        obj1Props.every(prop => isDeepEqual(obj1[prop], obj2[prop]))
    )
}

function type(obj) {
    return Object.prototype.toString.call(obj);
}

Hello everyone 👋

It's been over a year since this project was released. The feedback so far was phenomenal and it' seems that some people really find this project useful despite my initial thoughts.

I'd like to make the second version of it and I need your opinions on it. The idea is to introduce a completely new structure similar to the 30-seconds-starter kit.

Things I would like to include in the second version:

• Make the project 100% accessible, and add accessibility category
• Introduce visually pleasing dark mode
• At least one new category (e.g. Computer Science)
• Make it with Gatsby (so many things out of the box)
• Add the ability to share questions
• Individual pages for each question (better SEO I guess)
• Remove expertise tags, at least visually (so many people complain about it)
• Add about page
• A form to submit new questions without GitHub account
• Host the project on Netlify
• A random interview simulation

What do you think about proposed changes? Would you like to see something else? What current parts of the projects do you like the most?

I was browsing through the 30secondsofinterviews.org website and noticed that in the How to write comments in React section, there's a malformed HTML comment that's showing in the Good to hear section.

I wanted to change it by opening a PR with the file on GitHub but then noticed the error doesn't exist there.

Just a heads up :)

I was recently in an interview where I was asked "What is the difference between .equals and == when comparing Objects in Java?" that I thought would be a good example to highlight here. I do however want to think of the best way to go about it. To that end I've thought of two problems with it currently that should be addressed before submission:

• Should we expand this question to cover more languages?
• Should we consider this a Java specific question and host questions like it for other languages?

I did a double take because I didn't recognize this native function. Clued in, when I saw talk of components in the body of the message.

I'd offer a PR, but I'd prefer to leave that to someone who's actually worked with React. (Since I do not fit that description!)

I'd love to see a "Dark Mode" feature implemented. I find myself browsing this site at night on my phone, and I think having the option to toggle a dark theme would greatly improve the experience for certain scenarios like night time browsing.

Although there are many ways to implement this, I found a straightforward approach via this implementation example - https://flaviocopes.com/dark-mode/.

Looking forward to seeing if anyone else is interested.

I've noticed the clone an object question is incorrectly using Object.assign:

var a = {} // undefined
var b = Object.assign(a) // undefined
a === b // true

It needs to be updated to the Spread operator or the proper usage of Assign Object.assign({},a)

I'm curious how the setup process for the current generator works, but I'm guessing every question is under the JSON file, but should I just modify the question content in the file? OR is that file generated off of another resource or planned to be in the future?

Currently, we have around 30 questions. In order to implement difficulty category we would need a bit more, lets say 50+.

This issue represents mixture of my and @atomiks ideas.

We would like to implement some sort of real interview. When a user presses a button on a landing page he is redirected to a custom page where he is welcome with ~10 random questions. The user should be able to select dificulty junior, medior, senior for questions. We do not have Duolingo algorithms but @atomiks suggested that after each question user would press one of the 3 buttons:

• I know
• I partially know
• I don't know

Each button would carry different weight and at the end of interview, user could see his score (summ of all weights).

In order to make this interview, we would need to categorize questions by difficulty too. Would such thing be hard to maintain? Do we need categories for random interview(junior, sentior etc.) or we should have one single category?

We could also display small tag on question's card based on question difficulty on our main page.

What are your opinions on this one?

Composite paint is taking 700ms when showing an answer for some reason. Chrome and FF are instant

Currently, there are two questions where the markdown file is missing a Good to Hear section. extract.js doesn't handle this correctly and ends up reinserting most of the question under the Good to Hear section (which should be blank). This is observable in README.md and on the Web site.

Bugged questions:
How to write comments in React?
What is the difference between '+' and '~' sibling selectors?

We want to move some things out of Javascript/Node and into a more general Programming or Design headers. A big example of this is Big O complexity which is a general computer science concept that doesn't belong to JS and nesting it under JS only makes it confusing.

We should however note in those questions as we move them what language the examples will be in and any caveats thereof.

Otherwise we're going to get dinged pretty hard for 'Why is this Javascript when it applies to X langauge too" or "Why do you have duplicate questions for different languages"(should we support them in an ever changing landscape)

I'd suggest a general Programming and Design categories to host such questions

Similarly to 30 seconds of CSS. Shouldn't be hard to implement

The answer to the "What are JavaScript data types?" question is no longer correct

Because now we have 7 primitives data types (String, Number, BigInt, Boolean, Null, Undefined, Symbol) and 1 non-primitive data type (object)

Can I fix?

links :
https://tc39.es/ecma262/#sec-ecmascript-language-types
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures

I think of the time complexity of arr.sort is O(NlogN)

This issue was created by Maintainers Wanted 🤓

Support us by leaving a star on Github! 🌟

30-seconds-of-interviews is searching for new Maintainers! 👨‍💻 📬

Do you use 30-seconds-of-interviews personally or at work and would like this project to be further developed and improved?

Or are you already a contributor and ready to take the next step to becoming a maintainer?

If you are interested, comment here below on this issue 👇 or drop me a message on Twitter! 🙌

The title says it all. Our next step is adding React questions 😮

After talking with Sudheer Jonna (@sudheerj) we agreed to add react.js questions to 30-seconds repository.

Jonna already did 80% of the work in this repository: https://github.com/sudheerj/reactjs-interview-questions

The goal, for now, is to pick best ~25 questions from Jonna's repository and add them to our repository. All the questions are good. However, answers need a bit refactoring to match our style so the work is not just copy-paste 👍

Let's finish this by the end of October 📆

TODO:

• Update script to allow React.js questions
• React questions should have the purple gradient (@Chalarangelo 's idea)
• Add ~25 questions

The link generation for the readme is broken. Currently broken links are as follows:

Javascript

1. how-can-you-avoid-callback-hells-js-get-data-function-a-get-more-data-a-function-b-get-more-data-b-function-c-get-more-data-c-function-d-get-more-data-d-function-e
2. how-do-you-clone-an-object-in-java-script
3. how-do-you-compare-two-objects-in-java-script
4. what-is-the-difference-between-the-equality-operators-and
5. what-does-0-1-0-2-0-3-evaluate-to
6. what-is-the-difference-between-the-array-methods-map-and-for-each
7. what-will-the-console-log-in-this-example-js-var-foo-1-var-foobar-function-console-log-foo-var-foo-2-foobar
8. how-does-hoisting-work-in-java-script
9. what-is-the-reason-for-wrapping-the-entire-contents-of-a-java-script-source-file-in-a-function-that-is-immediately-invoked
10. create-a-function-that-masks-a-string-of-characters-with-except-for-the-last-four-4-characters-js-mask-123456789-6789
11. what-is-the-only-value-not-equal-to-itself-in-java-script
12. node-js-uses-a-callback-pattern-in-many-instances-where-if-an-error-were-returned-it-will-pass-it-as-the-first-argument-to-the-callback-what-are-the-advantages-of-this-pattern-js-fs-read-file-file-path-function-err-data-if-err-handle-the-error-the-return-is-important-here-so-execution-stops-here-return-console-log-err-use-the-data-object-console-log-data
13. what-is-the-event-loop-in-node-js
14. does-java-script-pass-by-value-or-by-reference
15. create-a-function-pipe-that-performs-left-to-right-function-composition-by-returning-a-function-that-accepts-one-argument-js-const-square-v-v-v-const-double-v-v-2-const-add-one-v-v-1-const-res-pipe-square-double-add-one-res-3-19-add-one-double-square-3
16. what-is-the-output-of-the-following-code-js-const-a-1-2-3-const-b-1-2-3-const-c-1-2-3-console-log-a-c-console-log-a-b
17. what-does-the-following-function-return-js-function-greet-return-message-hello
18. what-is-the-difference-between-synchronous-and-asynchronous-code-in-java-script
19. what-does-the-following-code-evaluate-to-js-typeof-typeof-0
20. what-are-java-script-data-types
21. what-is-the-purpose-of-java-script-ui-libraries-frameworks-like-react-vue-angular-hyperapp-etc

HTML

1. Not evaluated yet

CSS

1. Not evaluated yet

Node

1. Note evaluated yet

The URL linked from the repo head and the readme -- https://30secondsofinterviews.org -- is 404 on GitHub Pages.

Voting System

Ever since 30 seconds of code we wanted to add some kind of voting. Obviously that move would require us to have some sort of server. I would like to implement this server so we can voting feature here on 30 seconds of interviews. @atomiks suggested that instead of numbers being displayed we should have it as:
1️⃣ I was asked this question before : for new employees
2️⃣ I asked this question before : for employers

@Chalarangelo , @atomiks and I struggled to come up with the idea that would sync everything together so we are looking for opinions of others.

❓ The main problem is how to sync everything together so when somebody PR's new question, that some question goes into the database on the server while server maintains upvotes of other questions?

@skatcat31 and @flxwu do you have any ideas that would work in this case? I am willing to make and host the server. 😄

We want the UI to be as minimal as possible while staying fully functional. That being said I do not see a single reason to have sorting by alphabet options as most questions start with words "how" or "why".

Instead, we can do default sorting by expertise with nice animations (arrow up and arrow down).

@flxwu @atomiks opinions?

The first sentence of the answer to the question What is a stateless component? is wrong:

A stateful component is a component whose behavior does not depend on its state.

It should be:

A stateless component is a component whose behavior does not depend on its state.

myObject.life() maybe myObject.life

Since accessibility is such a huge part of FE, I'd love to see a section of questions dedicated to this part of our job. I have a few that I usually ask applicants that I'd be happy to add!

Here's the list of good accessibility questions that we could add. Only answers are needed 😉

I'd suggest this be a task for Hacktoberfest this year.

Let me know if you need any help with first-time contributions 👍 I'd be happy to help!

For more info follow our contributing guidelines.

Subsequently to #19 and the things we talked about in 30-seconds-of-code, I am thinking about adding a BackEnd. I mean, we don't have to give it full functionality, but we could for sure just set it up and maybe use it to easily try out things like voting. Maybe you guys already discussed it, but What do you think?

We would, of course, thus have to put it on i.e. heroku, but that's not a big deal.

A comment was made on Reddit:

I think splitting the questions into levels was a mistake.
It's the depth of the answer that should differ depending on the level of the candidate.

A junior should know about closure, an intermediate/senior should know about currying.
A junior/intermediate should know what a linter is, a senior should know what an AST is.
A junior should know how to use promises, an intermediate should know the difference between:

promise.then(a, b)
promise.then(a).catch(b)

Junior should have heard about unit testing,
Intermediate should know how to write test,
Senior should have setup testing frameworks at their last job.

I don't think being senior is about knowing quirks of some language,
It's about having done mistake in the past and being able to spread that knowledge around.

How should we handle expertise divisions? Or should they just be removed altogether? I think they're valuable depending on the role the candidate is interviewing for but not if they're being used improperly.

I think of the time complexity of arr.sort is O(NlogN)

@atomiks @fejes713 @skatcat31 @flxwu Website seems to be broken for me. We need to address this asap!

Notes

• This only seems to happen on Firefox on my PC, works properly for Chrome.
• No errors in console.

On 30 seconds of CSS I didn't have a README because it was impossible to.

If we are adding coding challenge questions then this README will not contain the full scope of our project. Its UX/styling is also worse so we should force people onto the website to get the proper experience. A lot of people coming from trending may not see the website or bother to visit it due to the README and miss out on things.

Our static README should be similar to 30s of CSS

Description

The website looks fantastic and ready for launch in my opinion. I taught about adding a more welcoming lancing page. @skatcat31 helped me write this introductory text which is straight to the point in my opinion:

"Interviews are daunting and can make even the most seasoned expert forget things under pressure. Review and learn what questions are commonly encountered in interviews curated by the community that's answered them and go prepared for anything they'll ask. By bringing together experience and real-world examples, you can go from being nervous to being prepared for that next big opportunity."

Any thoughts on this one? Any ideas and suggestions for landing page are welcome 😄

What does your feature belong to?

• Website
• README
• General / Things regarding the repository (like CI Integration)

I've noticed there is a question in the Javascript header about what a Closure is, but that is a CS idea and not unique to Javascript or a programming paradigm but is a feature of a language should it choose to implement that design strategy.

It should probably be moved under a general Programming header instead along with some others. We should continue to expand and edit this issue with other questions we think should be moved under a General Programming or Programming Concepts header

I'd suggest, similar to Chalarangelo/30-seconds-of-code#743 , to optimize the builder scripts by using markdown-builder' to make them more dynamic and readable.

Shouldn't the time complexity of Array.sort() be O(NlogN) instead of O(logN)? In questions/big-o-notation.md

what it says in the title! this has already been implemented in 30 seconds of css, and would be extremely useful, for example to link a friend to a specific question without them having to find it manually.

At the WeAreDevelopers World Congress in Vienna, I tried out the Pluralsight IQ tests several times - and the questions were really well-thought and well-chosen.
I think we could adapt at least some of them 👍

This issue was created by Maintainers Wanted 🤓

Support us by leaving a star on Github! 🌟

30-seconds-of-interviews is searching for new Maintainers! 👨‍💻 📬

Do you use 30-seconds-of-interviews personally or at work and would like this project to be further developed and improved?

Or are you already a contributor and ready to take the next step to becoming a maintainer?

If you are interested, comment here below on this issue 👇 or drop me a message on Twitter! 🙌

The phrase "Good to hear" is confusing for native English speakers on first glance in this application's context. It's typically used in response rather than as a signal to someone that information will follow. The phrase also doesn't convey that the section is essentially a summary of the longer answer's thesis.

I suggest changing the section title to a more apt word or phrase like "In Short" or "Good to know."

A large part of interviews isn't just answering questions like the ones currently, but also solving problems using real code. I think in order for this project to provide enough value to truly go viral as a great interview preparation source, it needs to allow people to submit solutions to common programming problems / assess their problem-solving ability using code too.

I can implement this functionality this weekend 🚀

The question titled: How do you clone an object in JavaScript?

The answer should mention the fact that getters and setters do not get copied in the ways you've currently described and that you need to use Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj)) to get a full shallow copy including the getters and setters. Using only spread to copy makes some kinda weird stuff happen with getters/setters. Spread operator copies the result of a getter if it was ran at that time and stores it as a property, it's pretty odd.

Here's a jsfiddle that shows what I'm talking about: https://jsfiddle.net/z3gszLmL/3/