Destructuring the console object
Just as we can destructure all other objects, we can destructure functions like log() and warn() directly out of the console object.
Read full articleInstead of using many arrow functions to extract the theme in your styled-components, you can group them and do them all in one block.
const Button = styled.button`
box-shadow: ${({ theme }) => theme.boxShadows.medium};
color: ${({ theme }) => theme.colors.white};
font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin: 0;
`;
const Button = styled.button`
${({ theme }) => `
box-shadow: ${theme.boxShadows.medium};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.semibold};
`}
margin: 0;
`;
const Button = styled.button`
box-shadow: ${({ theme }) => theme.boxShadows.medium};
color: ${({ theme }) => theme.colors.white};
font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin: 0;
`;
const Button = styled.button`
${({ theme }) => `
box-shadow: ${theme.boxShadows.medium};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.semibold};
`}
margin: 0;
`;
const Button = styled.button`
box-shadow: ${({ theme }) => theme.boxShadows.medium};
color: ${({ theme }) => theme.colors.white};
font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin: 0;
`;
const Button = styled.button`
${({ theme }) => `
box-shadow: ${theme.boxShadows.medium};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.semibold};
`}
margin: 0;
`;
const Button = styled.button`
box-shadow: ${({ theme }) => theme.boxShadows.medium};
color: ${({ theme }) => theme.colors.white};
font-weight: ${({ theme }) => theme.fontWeights.semibold};
margin: 0;
`;
const Button = styled.button`
${({ theme }) => `
box-shadow: ${theme.boxShadows.medium};
color: ${theme.colors.white};
font-weight: ${theme.fontWeights.semibold};
`}
margin: 0;
`;
Just as we can destructure all other objects, we can destructure functions like log() and warn() directly out of the console object.
Read full articleThere are several ways to concatenate in JavaScript. We can pick the one that is most readable in each situation.
Read full articleTo improve the readability of React components, we can import the styled-components they use from another file under a ui-namespace.
Read full articleWe can provide default values for variables in a way that respects “real” values that are still falsy.
Read full articleWhen using styled-components in React, we can use destructuring to make our components more readable.
Read full articleAre you calling the same function many times with near-identical parameters? Hide that repetition in a higher-order function for more readability.
Read full article