Presented at React Bangalore online meetup on 18th April

1. Super tools to boost
Productivity!
Souvik Basu

2. Who am I?
• JS enthusiast
• Freelance Frontend developer
• Lives in Vancouver, Canada
• Coding since Y2K bug (1999)
• React developer for 5 years!
• We can say that now 
• Angular for day job, React at night and Vue on weekends
@souvikbasu

3. Productivity??
• More Time
• More Energy
• More Work done
• Predictable outcome of work
• Less Anxiety and Stress
• Better Work-Life balance

4. Development Lifecycle
Prototype Design Code Debug Test
Build
DeployReleaseSupport

5. Prototype
• Best tool: Pencil and Paper
• Simple paint tools like MS Paint
• React Proto
• Mural

6. Design
• Don’t spend time in logo design yourself
• Hire a professional designer

7. Design Decisions
• Don’t reinvent the wheel
• Use reusable components from libraries
• Bit.dev

8. Few good libraries
• NativeBase (React Native)
• React Bootstrap
• React Toolbox
• Semantic UI React
• React Belle
• Material Kit React
• Ant Design for React
• Shards React (fast)
• Material UI
• React Virtualilzed
• Argon Design system React
• Blueprint
• React Desktop
• Onsen UI
• Evergreen
• Reactstrap
• Rebass (styled system)
• Grommet
• Elemental UI
• React Suite
• React-md
• PrimeReact
• KendoReact

9. Design Tools
• Sketch
• Component pack
• Figma
• Collaborative design
• Framer
• Fast and Responsive
• Adobe XD
• Collaborative design
• Zeplin
• Handoff code along with design

10. Code
• Stick to one IDE
• VS Code
• Atom
• WebStorm
• Sublime text
• Design+Code IDE
• BuilderX
• React Studio
• Reactide
• Handoff
• Typescript
• Saves a lot of time debugging type issues
• npx create-react-app <name> --typescript
• Use shorthand
• Optional chaining (const highTemperature = response.data?.temperature?.high;)
• Null coalescing (const animationTime = settings.animationTime ?? defaultTime;)

11. Headstart
• Use a boilerplate
• React Boilerplate
• Next.js (Server side)
• Gatsby (Static site)
• React Slingshot (React+Redux)
• React Admin (B2B)
• https://www.javascriptstuff.com/react-starter-projects/

12. IDE extensions
• Prettier
• Formatting
• ESLint
• Find and Fix problems
• Semistandard
• JS Standard styling
• Peacock
• Manage multiple VS Code instances with colored active bar
• GitLens
• Check code history from IDE
• React Extension Pack
• Auto code completion templates
• Find the right color theme for IDE
• Syntax highlighting
• Change-case
• Change case of variables from myValue to MY_VALUE

13. IDE tricks
• Sort all lines alphabetically
• Useful in constants file
• Make color of log statements almost invisible

14. Collaborate
• Invest in good Communication channels
• Zoom
• Teams
• Slack
• Collaborative tools
• New release in CodeSandbox
• Viscode

15. Isolating Components
• Storybook
• React Cosmos
• Styleguidist

16. Debug

17. Debug
• console.log
• debugger
• Chrome debug tool
• VS Code extension
• https://remotejs.com/
• Remote App debugging

18. Debug CSS

19. Browser extensions
• ColorZilla

20. Browser extensions
• Page Ruler Redux

21. Browser extensions
• Whatfont

22. Browser extensions
• simple-debug.css

23. Browser extensions
• CSS Scan
• https://getcssscan.com/

24. Browser extensions
• React-Sight

25. Test
• No test
• Higher price to pay in long term
• Cypress (end to end)
• React Testing Library (for testing React components)
• Ghostlab
• Test on multiple devices simultaneously

26. Build
• Rollup vs Webpack vs Parcel
• Google closure compiler vs babel+uglify

27. Deploy
• Invest in test env (UAT)
• Tools to check PR
• Netlify
• Zeit
• Automate prod deployment
• Heroku

28. Release
• Octopus
• Microsoft TFS

29. Support
• Log when something fails
• Next time that log should tell us what went wrong
• Don’t add console.log or debugger to prod
• Log Rocket
• DataDog
• Splunk
• Application Performance Management tools
• AppDynamics

30. Learn to Code
• Stack overflow Driven Development
• Invest time to learn the fundamentals
• Udemy
• Pluralsight
• Wes Bos JS courses
• Kend C Dodds on React testing
• React Bits by vasanthk

31. Learn to Type
• Saves a lot of time in long run
• if you can type without having to look at the keyboard

32. Physical tools
• Screens
• Single Wide screen over multiple small
• Dark mode
• Ergonomic Keyboard and mouse

33. Physical tools
• Do not code on couch!!

34. Wholistic life
• Meditation

35. Wholistic life
• Take breaks
• Regularize sleep and food cycles

36. frontend.social/tools

37. Stay safe!!

38. @souvikbasu