Stanislav Khorunzhyi, "Front-end it like a PRO"
Download as PPTX, PDF•0 likes•90 views
This document provides 12 tips for front-end developers to code like a pro, including always using form tags for forms, adding labels for inputs, configuring linters from the beginning, adding Git hooks to run linters on commit/push, understanding transpilation processes, using modern array methods, and optimizing final bundles through lazy loading and bundle analysis. Key recommendations are to focus on semantics, accessibility, best practices for code quality and performance.
Stanislav Khorunzhyi, "Front-end it like a PRO"
- 1. Front-end it like a PRO By Stanislav Khorunzhyi
- 2. A few words about me 1. Senior JavaScript Developer at Sigma Software 2. I am a driver of JavaScript community in my company 3. 99% of my work is strictly directed to the Front-End development 4. During last year I interviewed more than 50 people on different positions 5. Now I work onVue.js start-ups 6. I think that any successful project must have Git Hooks, good linters,TypeScript, Unit tests and lodash.
- 3. Who is a PRO developer? 1. Makes code that does not require any refactoring 2. Applies the brand-new practices and features 3. Puts the right things to the right places 4. Knows how to work with UI 5. Always keeps in mind that the user experience (UX) is the most important part of any application / website / game etc.
- 5. MOVE SHOOT
- 10. Because your form is not a form…
- 11. Tip #1: Always use <form> tag for a form
- 12. Tip #1: Always use <form> tag for a form
- 13. Tip #2: Use labels for inputs
- 14. Tip #2: Use labels for inputs
- 15. Tip #3: Use modern tags PRO developer uses the new tags from HTML5 specification:
- 16. Tip #4: Add shortcuts & hotkeys
- 17. Tip #4: Add shortcuts & hotkeys 1. https://www.npmjs.com/package/hotkeys-js 2. https://www.npmjs.com/package/mousetrap
- 18. Tip #5: Keep a version of the app in footer 1. It allows users to report bugs 2. Allows QA engineers to specify the app version in bug description 3. Avoids inconsistent state when on some environment it works, but on other it doesn’t
- 19. Tip #6: Configure ESLint + Stylelint at the beginning 1. Forget aboutTSLint (it’s fully deprecated) 2. Don’t spent time on configuring linter by yourself (just use or modify Airbnb or other popular config) 3. Continuously extend the config and adapt it to the project needs 4. Run linters on each commit or push in Git
- 20. Tip #7: Add Git hooks to the project 1. Git hooks allow you to run any bash script when certain important actions occur 2. The most popular actions to hook are commit and push 3. All what you need is Husky!
- 21. Not this one…
- 22. Tip #7: Add Git hooks to the project Husky makes git hooks easy: https://www.npmjs.com/package/husky package.json
- 23. Tip #7: Add Git hooks to the project Lint-staged will run Git hooks only against staged Git files: https://www.npmjs.com/package/lint-staged package.json
- 24. Tip #8: Know how the transpiling process work 1. What happens to theTypeScript / ES Next code? 2. What is the difference between concatenation, minification and transpiling? 3. What are polyfills for? 4. How SASS / LESS / etc. variables work?
- 25. Transpiling process:TypeScript 1. TypeScript gets compiled into JavaScript withTSC (TypeScript compiler) and in rare cases with Babel 2. When there is aTypeError, theTypeScript will not be built for the production (types are pretty strict) 3. Each 3rd party dependency (library) must have a @types included (or the developer must describe them by himself)
- 30. Processing code: Polyfills A polyfill is a piece of code (usually JavaScript on theWeb) used to provide modern functionality on older browsers that do not natively support it.
- 31. Tip #9: Configure auto-polyfills .browserlistrc file will help tools like PostCSS or babel-preset-env correctly add polyfills to your app:
- 32. Tip #10: Use modern array methods
- 35. Tip #10: Use modern array methods
- 36. Tip #11: Use lazy loading 1. Lazy loading helps your application to be loaded faster 2. Scripts, images, videos or even the whole pages can be lazy loaded 3. If the lazy loading is applied to the pages, make sure you lazy load only rarely used pages
- 37. Tip #12: Optimize the final bundle 1. UseWeback bundle analyzer to check what is included to your final bundle 2. Use Audit tab on Chrome DevTools (called Lighthouse) to check the page loading speed 3. Try to avoid libraries with default exports
- 39. bundlephobia.com
- 40. Useful resources 1. HTML semantics and modern tags 2. Building forms 3. eslint-config-airbnb 4. stylelint-config-airbnb 5. TypeScript compiler options 6. Polyfills in JavaScript 7. Configuring browserslist 8. Modern array methods
- 41. Apply these rules and let’s make the Front-End great again! https://t.me/stan_kh
Editor's Notes
- #4: Расставим все точки над и... Но делает это не бездумно Делает правильные вещи в правильных местах
- #5: Интерфейс довольно сильно нагружен, с первого взгляда довольно сложно сказать куда мы должны нажать чтобы передать сообщение по рации. Но нам не нужно быть профессионалом или игроманом, чтобы знать что
- #11: И первый пример ошибки, которую не допустит профессиональный девелопер,
- #12: Это использование тега формы для создания форм.
- #13: Скорей всего этот пример для вас он очевиден и прост. Но это отличный пример того, как простым несоблюдением правил, мы можем испортить пользователям их user experience В формах есть еще несколько паттернов, к которым пользователи уже привыкли, к примеру
- #14: Мы можем положить эти лейблы в span и добавить стилей, но если мы положим их в тег <label> с аттрибутом for
- #15: на нашем инпуте автоматически сработает событие фокус. Поэтому правильное использование форм, поможет значительно улучшить user experience на вашем приложении
- #16: There are many new tags that came with HTML 5 and you have to know them all. I would also say that semantic HTML is pretty important to get your app ranked to the top in the Google search results. Google robots will know where is the article, and where is the headings
- #17: We added a couple of shortcuts to the app, like c - create request and cmd + D to duplicate an existing request. The users were so happy with these improvemet. Это сможет показать вашу компетенцию с лучшей стороны, что вы заботитесь не только о том как бы побыстрей сдать фичу, а о своих пользователях
- #19: Вы можете предложить это сделать, и возможно это сэкономит вам уйму времени. Избежать ситуации,
- #23: Мы долгое время использовали Хаски на одном из проектов, и после столкнулись в проблемой
- #24: Linters for JavaScript are pretty fast, but on one of my projects we had too many components and we realized that we didn't have to run linters for the files, that we had not touched
- #25: Как профессиональный разработчик, вы должны хорошо знать как работает процесс транспайлинга, и что происходит с вашим кодом до того как он попадает на продакшн
- #26: Чем-то похоже на такие языки как Джава
- #27: Есть такое слово Транспайлинг Что же это значит? Наш код, он адаптируется, заменяя новые конструкции на те, которые уже есть в старых версиях языка, и зачастую это увеличивает размер файла
- #28: Each modern front-end project ships only one javascript file
- #32: Earlier we used to include polyfills to our apps manually Ok, moving forward
- #42: И давайте снова сделаем фронт-енд великим! Всем спасибо!