anuk79

function flattenArray(arr, res) {
  let result = [];
  
  for(let index = 0; index < arr.length; index++) {
    const currentValue = arr[index];
    if(Array.isArray(currentValue)) {
      result = [...result, ...(flattenArray(currentValue))];
      // we can also use concat method to achieve the same result
      // result = result.concat(flattenArray(currentValue));
    } else {

anuk79

Speaker Rider

by Tatiana Mac

Before I'll agree to a speaking event, I try to do as much research I can around the event to ensure it aligns with my ethos. I want to share this in case it's helpful to any other speakers.

👐 Speaking comes with immense privilege. I am grateful to all the conference organisers who have brilliantly hosted me. I would love to continue to exercise this privilege to speak at conferences, and use this privilege to make the landscape more accessible and beneficial to tech's most marginalised and suppressed communities.

😫 I wish I didn't have to, but this is long because I provide a lot of explanations for those of you who never had to consider these things. And I will be honest, most thoughtful conferences I've attended check most of these boxes intrinsically, particularly when conference runners are experienced speakers. They get it.

1️⃣ All of these are based on my own ethos. I don't wish to or attempt to speak on behalf of all conference speake

anuk79

import {
    LoadingSpinnerStyled,
    ErrorStyled,
} from './user.styled';

export class User extends Component {
    render() {
        const { fetching, userDetails, errorFlag } = this.props;
        let content;
        if(fetching) {

anuk79

import styled from 'styled-components';

// components
import LoadingSpinner from '../../../components/loading-spinner/loading-spinner';

export const LoadingSpinnerStyled = styled(LoadingSpinner)`
    margin: 20px;
`;
LoadingSpinnerStyled.displayName = 'LoadingSpinnerStyled';

anuk79

// vendors
import styled from 'styled-components';

// components
import LoadingSpinner from '../../../components/loading-spinner/loading-spinner';

export const LoadingSpinnerStyled = styled(LoadingSpinner)`
    margin: 20px;
`;

anuk79

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4
• Troubleshooting
  • Tracing broke after an NPM update

Profiling in production

anuk79

document.addEventListener('keyup', (event) => {
    switch (event.keyCode) {
        // escape
        case 27:
            // code to exit current component
            break;
        
        // enter || spacebar
        case 13 || 32:
            // submit or some action

anuk79

// helper function to get all focusable elements in the context provided in arguments

function getFocusable(context = 'document') {
    let focusable = Array.from(context.querySelectorAll('button, [href], select, textarea, input:not([type="hidden"]), [tabindex]:not([tabindex="-1"])'));
    return focusable;
}

// get the first focusable element within a context
export function getFirstFocusable(context = 'document') {
    let focusable = getFocusable(context);

anuk79

  import moment from 'moment';
  const datesArr = ['2020-03-01', '2020-01-10', '2020-02-07'];
  const result  = datesArr.sort((d1, d2) => moment(d1) - moment(d2));

  console.log(result); // asc sort

anuk79

.overflow-with-ellipsis {  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /** width should be there for the traget or parent container */
}