VoV 083: CSS Tooling and Development Practices With Tracey Holinka
This episode of Views on Vue features Tracey Holinka, a web application architect with the role of front-end lead for Bloomberg industry group. The Views on Vue podcaster begin by asking Tracey how she got into Vue. Her Vue experience starts at work where she didn’t like the technologies they were using so she and a colleague decided to switch over to GraphQL, Apollo Client, and Vue. One of the many things that she appreciates about Vue is its diverse array of applications.
Ari begins a discussion on Vue and CSS by asking Tracey if she has found any notable differences, in terms of developer experience, between doing single file components or using Vue by including a script tag. Tracey responds to this by sharing her preference for single file components because she appreciates the division of the languages, or in other words she likes HTML files only having HTML, her CSS files only having CSS, and so on. She feels that with this separation of languages she can work faster and understand the code easier.
The Views on Vue panelists then ask Tracey how she handles CSS in her Vue development environment. She shares her opinion on how she used to prefer manual scoping, particularly for smaller projects and push CSS modules for larger projects. She then goes on to share why she now prefers CSS modules for projects of all sizes. She then goes on to share some of her best practices with the other Vue developers for writing proper CSS including ways to prevent collisions and when she uses CSS preprocessor. The panelists then asked Tracey how she knows when to modularize or componentize an element of a page or other functionality. In response to this question Tracey shares how she came up with her best practices and why she likes to componentize when she does.
Next the Vue experts discuss tools they use to help support the use of component libraries and ways to help other developers figure out what components are available. Tracey shares how she went to a Vue conference and heard about the component library Storybook as well as storyshot which is a plugin for Storybook that is used in regression testing. Storyshot works by taking an image of a component and uses it to check the CSS of a page. Since Tracy had been using Vue for about a year before using Storybook and storyshot, Ari asks how difficult it is to retroactively fit an application with these tools. Tracey shares that this retrofitting is easy, particularly more so if the user is familiar with unit testing already. The Vue experts also discuss different technologies that they use for unit testing such as Jest, Vue Util, Cucumber, and Webdriver.io. They discuss the benefits of using GraphQL and Apollo instead of the more common Rest API solution.
The final topics discussed by the Vue panelists are community building and women in the technology community. Tracey’s shares her observation that the Vue community is growing but she wants to focus on having more women involved. The panel holds a discussion about women in tech and some of the challenges facing them. They discuss some of the support that is out there for women to help them succeed in technology. The Vue community is a very inclusive community that is proactive about including everybody.
- Ben Hong
- Ari Clark
- Elizabeth Fine
- Tracey Holinka
- Apollo Client
- CSS preprocessor
- Vue Util
- Tracey Holinka Github
- Playing games from your childhood
What are good practices for migrating old pages to Vue?
Early on in the podcast Tracey talks about using Vue SPAs.
Are there noticeable performance differences when migrating old pages to Vue?
Tracy has noticed the speed of her pages doubling.
What is a good tool for using component libraries?
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular.
Can CSS modules be used outside of Vue?
CSS modules has a wide variety of usages. One specific usage noted by Tracey is in Ruby on Rails.