User friendly Tech help – Helping ppl learn

Using JS to add div elements dynamically

February 20, 2018

Scenario:- Legacy code thrown at you with new UX design, and you cannot touch the original code. So doing latest UI changes is headache. Solution:- Play with the structure of the html and add latest flexbox or grid CSS to make your life hell easier. How i did re-structuring was appending new parent div, which […]

How to debug jest test cases(React)?

February 13, 2018

Adding test cases to your code always helps in the long run, today we’re going to talk about how to debug test cases. Do something today that your future self will thank you for Using our all time favourite Console.log it(‘should call touch & asyncValidate methods’, () => { const component = shallow( <TrialRegistrationForm handleSubmit={mockHandleSubmit} […]

Console.log trick for debugging

February 2, 2018

Why need see our debug messages bigger and brighter, simply use the below trick. console.log(‘%c This is my log for debugging’, ‘font-size: 40px; color: green;’); “Striving for excellence motivates you; striving for perfection is demoralizing.”

How to update node to a given version

January 18, 2018

Scenario:- Update node to the given version ? Solution:- Using nvm:-Node Version Manager Install nvm curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash Reopen the terminal Check nvm is installed by typing nvm > enter > it will show nvm commands nvm install Node_Version_i_Want $ nvm install 8.9.4 Note:- After installing the latest node incase your build fails […]

Working with prettier in Visual studio code

January 18, 2018

“Whenever you are confronted with an opponent, conquer them with love.” What is prettier ? In layman terms its an handy tool that will format our code against some set standards, default formatting rules to achieve consistent code style. How to install prettier in VS Code? Search > Prettier – Code formatter Note:- Incase you have […]

Most Useful Git commands

January 11, 2018

I have decided to stick with love. Hate is too great a burden to bear. List all the branches : git branch Pull the recent changes: git pull Create a feature branch : git checkout -b <new branch name> <parent branch name> Delete branch local: git branch -d <branch-name> or git branch -D <branch-name> Delete […]

How to add CSS modules into your react Application?

December 21, 2017

“Believe in yourself && Keep Learning” Step1:- In our example we have take “create-react-app” template as reference. Install this and than perform “yarn eject” What is yarn eject:- it will give you control of the create-react-app and you can install or play with config settings or package.json file. Step2:- Search for “css-loader” inside the file […]

How to check that javascript object contains the given key?

December 14, 2017

A wet man does not fear the rain. Issue:-How do I check if an object has a key in JavaScript? Example:- // Sample Object const REMINDER = “REMIND_ME”; reminderObj= { INBOX:`${REMINDER}_INBOX`, USERS:`${REMINDER}_USERS`, GROUPS:`${REMINDER}_GROUPS`, } Problem1: Now we want to check that our object have “INBOX” as key or not? Solution:- Object.prototype.hasOwnProperty.call(reminderObj,”INBOX”); Note:- We could directly […]

Handy tips and Tools for working with wordpress -Part2?

December 12, 2017

“The best teachers are those who show you where to look, but don’t tell you what to see.” 1.How to add text-slider in wordpress pages ? Solution:- By using the “Text slider“ plugin Activate the plugin > Add the Main and Sub text > Configure the settings > add the wp_text_slider(); ?> in the code […]

How to create project in Sonar Qube ?

October 17, 2017

Problem:- How we can create(or provision) project using Sonar Qube UI. Solution:- We already know that we can Sonar Qube will automatically create a project when we run the code analysis but incase we want to manually provision the project before running the code scanning we can do that. 1)Login as administrator on sonar qube […]

Next Posts >>