Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jan 31 2019 08:18
    FieryCod commented #1379
  • Jan 30 2019 10:01
    atif089 commented #1379
  • Jan 30 2019 10:01
    atif089 commented #1379
  • Jan 30 2019 10:01
    atif089 commented #1379
  • Jan 30 2019 04:11
    tclindner opened #1998
  • Jan 28 2019 05:21

    ljharb on master

    [eslint config] [base] [patch] … [eslint config] [patch] extend … Merge pull request #1996 from r… (compare)

  • Jan 28 2019 05:21
    ljharb closed #1996
  • Jan 28 2019 04:50
    ljharb synchronize #1996
  • Jan 27 2019 21:45
    ljharb closed #1997
  • Jan 27 2019 21:45

    ljharb on master

    [editorial] [react] fix typo [eslint config] [*] [deps] upda… (compare)

  • Jan 27 2019 21:39
    ljharb synchronize #1997
  • Jan 27 2019 21:39
    ljharb labeled #1997
  • Jan 27 2019 21:39
    ljharb labeled #1997
  • Jan 26 2019 18:14
    ljharb labeled #1996
  • Jan 26 2019 18:14
    ljharb labeled #1996
  • Jan 26 2019 18:13
    ljharb synchronize #1996
  • Jan 26 2019 18:05
    ljharb commented #1996
  • Jan 26 2019 08:55
    telmen opened #1997
  • Jan 24 2019 19:37
    peteclark3 commented #1689
  • Jan 24 2019 17:25
    ljharb commented #747
I get these two elsint errors when I try to attach an event handler on the tbody element:
Visible, non-interactive elements with click handlers must have at least one keyboard listener.eslint(jsx-a11y/click-events-have-key-events)

Non-interactive elements should not be assigned mouse or keyboard event listeners.eslint(jsx-a11y/no-noninteractive-element-interactions)
<tbody onClick={score}>
// ... other rows
I'm simply trying to build a telephone keypad-style UI that enables the user to choose a score
What is the recommended solution here?
BTW, that my score function:
const score = (event) => {
& it works as expected (it grabs the score of whatever clicked cell/td)...
Jordan Harband
either override the rule or put the onClick on each td
react is using delegation internally so you don’t have to worry about it.
Yeah, I think overriding the rule would be easier in this case. Thanks @ljharb
Has the eslint-plugin-react-hooks been incorporated into Airbnb's eslint configuration yet?
Jordan Harband
Chris Cullen
    for( var i = 0; i < arr.length; i++){
       var next = arr[(i+1)%len];

         diff = (values[arr[i]] - next );
          date += values[arr[i]];
Why is next here going back to the start of the array once its finished?
how can I make it end at the end
hello everyone
i have to read the name of the sheet of the excel file
how i can do ?
@rahulkoundal use haskell instead
Jordan Harband
@123xylem don’t use loops. use reduce for that.
@rahulkoundal this isn’t a generic javascript her channel, it’s for Airbnb’s javascript style guide
ajay yadav
here i want to show to my file in pdf or doc formate so here is pdf is working fine but in Doc it direct goto downloaded
<Iframe src={this.state.file} width="450px" height="600px" />
can any one help me ,
Javier Pons
hi folks,
I want to upload using react and node, express a js file to mongodb. Any link or best and simple tech to do it?
any npm library?
Jordan Harband
this isn't a general help channel; it's for airbnb's JS styleguide.
Javier Pons
ups! thnx
Sangeeth Sudheer
Hey guys! Was curious about how you adopt this in various JS projects inside Airbnb (or if someone is using it in their company). Do you duplicate these in your respective projects or try to include them via npm? What about JS in different contexts (eg. front-end vs back-end vs electron vs ...)? Also, what about stuff like .editorconfig and .prettierrc?
Jordan Harband
prettier, if you use it, should only be configured and used via eslint
editorconfig you can set it you want but few things use it
everything should only be included via npm
Subho Karmakar
Someone please help me with the eslint-prettier setup for React App.
Sayed Sadat
Hello guys! is there any one to help me ?
Daniel Johns
Anyone know how to export a wrapper express-jwt such as
exports.protect = (req, res, next) => {
  expressJwt({ secret: process.env.JWT_SECRET })
  if (!req.user) return res.status(401).json("Unauthorized")
  return next()
If I stick expressJwt(...) directly in as a route middleware it works. But I was trying to add my own error message
Should I just exports.protect = expressJwt({ secret: process.env.JWT_SECRET })?
One problem is that sends a stack trace to the user
Sandeep singh
Hnn#%%, nun. AA
Good afternoon
Hello, everyone. I have got the error that "ERROR in [at-loader] ./src/app/auth/login/login.component.ts:82:22
TS2339: Property 'toastr' does not exist on type 'LoginComponent'.", when I build the angular app using ng build --prod with webpack.
please help me.
my webpack.config.js file is:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const helpers = require('./helpers');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { AngularCompilerPlugin } = require('@ngtools/webpack');
const { resolve } = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const devMode = process.env.NODE_ENV !== 'production';

module.exports = {

entry: {
    vendor: './src/vendor.ts',
    main: './src/main.ts',
    polyfills: './src/polyfills.ts'
resolve: {
    extensions: ['.ts', '.js']

module: {
    rules: [{
            test: /\.ts$/,
            loaders: [{
                loader: 'awesome-typescript-loader',
                options: { configFileName: helpers.root('src', 'tsconfig.app.json') }
            }, 'angular2-template-loader']
            test: /\.ts$/,
            use: '@ngtools/webpack'
            test: /\.html$/,
            loader: 'html-loader'
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[hash].[ext]'
            test: /\.(sa|sc|c)ss$/,
            use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: process.env.NODE_ENV === 'development',
            exclude: helpers.root('src'),
            test: /\.(css|scss|sass)$/,
            include: helpers.root('src'),
            loader: 'raw-loader'

plugins: [
    new AngularCompilerPlugin({
        mainPath: resolve('./src/main.ts'),
        sourceMap: true,
        nameLazyFiles: false,
        tsConfigPath: resolve('./src/tsconfig.app.json'),
        skipCodeGeneration: true,
        hostReplacementPaths: {
            [resolve('src/environments/environment.ts')]: resolve('src/environments/environment.prod.ts')
    new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[hash].css',
        chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    new webpack.ContextReplacementPlugin(
        helpers.root('./src'), {}
    new HtmlWebpackPlugin({
        template: 'src/index.html'
    new CopyWebpackPlugin([{
            from: 'src/assets',
            to: 'assets'
            from: 'src/favicon.ico'


Jordan Harband
@sombath16496 this is a channel for airbnb's javascript styleguide, not a genericb help channel (airbnb also doesn't use angular)
hello all could i please have help with js i'm another noob who didn't read the roomdesc
I'm writing an article on how to organize react code, was researching on how airbnb organizes theirs? Do you guys go for flat-file structure like Facebook or nested?
If nested on what basis do you make that heirarchy
Jordan Harband
definitely nested. typically by feature
Kushagra Varade

Can someone please help me

To detect wether the user has clicked on confirm or on leave page for beforeunload event in js

Richard Sithole

Hi there

I have a 10x4 grid of checkboxes (call it x, y) in an html form - I would like to get the coordinates (x, y values) of the checkbox when a user selects one. What data structure can I use to pluck out those coordinates?

I've tried using a Map like so:

 onCheck(e) {
    const productMap = new Map();

    productMap.set('productId', e.path[2].id.split('-').pop());
    productMap.set('productLevelId', e.path[2].id.split('-').pop());

The checkboxes are generated dynamically, so I use a click event listener and pass in the clicked element..

The backend expects from me, a payload like this:

productId: 4,
productLevelId: 1

The above coordinates represent a checked checkbox within the grid.

Any ideas how I can accomplish this?