Featured in this edition of Spotlight is Yan Zhu, creator of Spectre.css, a lightweight, modern, and responsive CSS framework for faster development.
Yan is a Microsoft MVP, MS blogger, and Xbox gamer. He works at Blocks.tech on product design, front-end development, and audience growth.
Q: When and how did you begin your open source journey? What got you started with Spectre.css?
Yan: Back in 2014, as the co-founder and front-end designer of a Slack-like service, I coded Jade/Pug templates and CSS (Less/Sass) for the whole project. I learnt whatever I could from CSS Tricks, newsletters, Mozilla documents, etc. The power and complexity of CSS really impressed me.
One day, I decided to share my code with the open source community—and saw that it helped me learn faster.
The first project I open sourced was a set of pure CSS icons (Fileicon.css), which was part of the file sharing component. It was mentioned at the CSSconf 2015 in China for its well-organized documentation and customization.
Soon, I open-sourced other components, which later became the Spectre.css framework. This was the very beginning of my journey into pure CSS and best practice open source projects.
In recent years, I've created Instagram.css, Devices.css, Markdown.css, Icons.css, and Slides.css, among others. Some of them are still in the early stage, and there's no doubt that I will continue contributing.
Q: How did you manage to keep Spectre lightweight in spite of providing numerous features out of the box?
Yan: It is difficult to achieve the balance between lightweight, full-featured and well-designed. I used all my experience from development to outline the essential components in my websites, web apps and side web projects.
Using a methodology called Atomic Design, I created different levels of modular components by building up from basic elements and consistent style guides. I also used reusable components, to accelerate my web development.
Spectre.css also implements New Web standards to make modern features easier to archive.
Spectre was one of the first frameworks to implement the Flexbox layout with the help of Autoprefixer, which applies prefixes based on the latest browser popularity data.
I believe New Web standards resolve problems in a lightweight and modern way.
Q: How did you manage to give your product an edge and create a niche in such an overpopulated frameworks market? What would you advice aspiring developers who want to disrupt established industries like this?
Yan: The front-end market is overpopulated with multiple frameworks and libraries, all of which do the same job. I can think of at least 10 frameworks in the CSS Framework market alone.
You need to give your product features that stand out. For example, Spectre has a complete variable-based style system that applies to all components. In most cases, you can define a new primary color to adapt Spectre.css to your brand which follow your style guideline.
Another example in Spectre is the East Asian language (CJK) support. Using my knowledge of the Chinese language and experience in design and code, I've made some improvements to the fonts and typography.
Spectre.css also implements pure CSS components, such as Tooltips and Menus, which are production-ready and without opinionated JS code.
You will find that experimental components based on New Web standards can inspire creativity.
Back to the original question, my advice is to make good use of your advantages and experience. Also, don't forget to make solutions lightweight.
Q: What are your favorite development tools? What do you like about them?
Yan: Absolutely Visual Studio Code. I use Code as my main tool for front-end development, and Git client for its powerful extensions platform, Git-related features, and enhanced GitLens extension. Visual Studio Code helped me collaborate better with my co-workers through its support of backend languages.
For browser compatibility testing, I use Azure remote desktops and local virtual machines for cross platform testing. I will definitely switch to BrowserStack, because I've found it is easier and has many more platforms to test on.
It is also worth mentioning that as part of my job, I use Sketch and Figma for product design (before I start developing).
Q: Which open source projects do you rely on (outside your own)?
Yan: Visual Studio Code is one of the top open source projects I use almost every day. Previous to Code, I used Atom and WebStorm.
Chrome/Chromium is the second project that comes to mind. I use Chrome for both daily browsing and development. Chrome's DevTools is the best web debugging and inspection tool. I also use Edge Chromium beta for testing.
There are some other open source projects I use, such as WordPress (which I made themes for), NPM/Yarn for installing and managing packages, and Gulp for auto-processing code. Open Source is everywhere now!
Q: What’s your advice to developers who are on the fence about contributing to open source? How can one sustain the momentum once they’ve started?
Yan: Practice learning by coding. Believe me, you will get some valuable advice and learn cool new things from the community.
By open sourcing your code, you will learn how to write good code that others can easily read and use, how to manage project issues and features, and how to collaborate with other talents.
I suggest you start small and keep going. I think the biggest challenge of open source is finding somewhere to start from. One can start filing a constructive issue, fixing a bug or sharing a component from work if company policy allows it. It doesn't need to be a perfect, full-featured project from day one. The community will help add continuous improvements.
Q: What do you do in your spare time? Incidentally, do you have any non-programming hobbies that you tried to create a programmatic fix for?
Yan: I play Xbox games (Xbox gamertag is Yan#4120) in my spare time. I am an Xbox achievement hunter and enjoy high quality console games. It is an amazing experience to visit places you've never been to, through games.
There are Xbox game sales and new releases every week. But I always had to go to different pages to find this information. As a fix, I wrote a crawler to integrate information from multiple places into one page, at xboxlive.store (which other Xbox gamers can use as well).
Check out Spectre.css on GitHub.
(Responses are edited for clarity).
We ❤️ open source. Fill this form out to get free, lifelong access to BrowserStack for your project's testing needs.
