dhbalaji

Websites with interview Questions

1. Frontend Interview Handbook
2. Infinum handbook

Github repos to watch for

1. https://github.com/h5bp/Front-end-Developer-Interview-Questions

dhbalaji

My commits were not listed in github but why

I did a few commits to Github but the username and email were not the same as mentioned in github. Due to it wont show up in the streak graph in Github.

Solution here https://stackoverflow.com/questions/8801729/is-it-possible-to-have-different-git-configuration-for-different-projects

Once you clone a repo, run

git config user.name git config user.email

dhbalaji

Files to backup when you change the OS

1. .ssh folder and its contents
2. .npmrc
3. .gitignore
4. .gitconfig
5. other configuration files under home or users directory
6. IDE settings (preferably on some private repo)

dhbalaji

I wrote about aliases and other linux concepts that you need to be famililar with. Aliases are used almost every day by expert programmers. But in the real world, its not easy to create an alias and let every user in your group use it. You may need a manager or VP permission to modify something in the prod boxes which could be a frustrating process in itself, remember raising tickets for someone?

Aliases can be created and removed. I called certain aliases permenent because they persist from user session to session. Whereas the temporary ones are lost.

Set permenant alias

For individual user, create an entry in ~/.bashrc

For group users or everyone on the linux OS /etc/profile.d/yourAliasFile.sh. Its important to set the extension to .sh. You need root access to perform this activity.

dhbalaji

Capitalize first line

  function capitalizeFirstLetter(str) {
    return `${a.charAt(0).toUpperCase()}${a.slice(1)}`;
  }

Get selected text from DOM

dhbalaji

Debug mobile chrome UI screens on android

If you had done any responsive web development, you can verify your code on the mobile devices in 2 ways. It could be done on

1. the chrome devtools with device emulator
2. the real android or IOS device connected to your laptop via USB

Let us look into step 2 in this short article

Things you need

dhbalaji

tabIndex and accessibility

Key points

• Form elements and links are tabbable by default. It means we can use tab to navigate through them.
• If you want any other element tabbable or to get focus on tab, you need to explicitly mention tabIndex=0
• Once an element gets focus, it must respond to enter / space keypress
• You can change tabOrder by using the tabIndex values
• display:none means the tabbable element in that section wont get focus

dhbalaji

includes in ES6 to search for string, item in array

TLDR: Of course from different prototypes.

   const str = 'We are Indians';
   const subStr = 'India'
   const hasSubStr = str.includes('India');
   
 

dhbalaji

React hooks Ajax Call - the right way

React hooks are used in functional components. It means, we no longer have componentWillMount or componentDidMount. Lets find out how to do ajax call in React hook useEffect.

const [animals, setAnimals] = React.useState([]);

React.useEffect(() => {
    const fetchAnimals = async () => {
 const response = await axios.get(`https://api.github.com/animals/`);

dhbalaji

Using delete on an array works but there will be holes in the array, use splice instead.

Wrong

  const arr = ['dog', 'cat', 'pig']
 delete arr[arr.length - 1];
  console.log(arr); // ['dog', 'cat', '']