VueJS

Creator of Vue.js and Vite: Evan You's Journey From Google Engineer to Open Source Pioneer

Sep 14, 2023

2 min read

In this episode of "Just Ship It," Evan You, the creator of Vue.js and Vite, discusses his journey to becoming an independent open-source developer. His dedication to Vue.js and (and now Vite) since 2016 has made him a prominent figure in the open-source community. This conversation highlights Evan's transition to full-time open-source work, the growth of Vue.js, and his aspirations for the future.

Evan shares his journey toward becoming a full-time open-source developer and the challenges and factors that facilitated this shift. Evan attributes his success to a combination of luck and persistence. He elaborates on his experiences while developing Vue.js, emphasizing his passion for solving intriguing problems. He outlines his approach to API-driven development, where he designs how things should work before implementing them.

Evan explains that Vue.js initially attracted users through platforms like Hacker News and Chinese social networks, thanks to its bottom-up approach and user-friendly documentation. This is in stark contrast to larger frameworks like React and Angular, which often gain enterprise-level adoption due to corporate backing.

Evan reflects on Vue.js's evolution, highlighting the turning point when it gained prominence in the Laravel community, solidifying its reputation as a dependable framework for production projects. He discusses how Vue.js particularly appeals to back-end developers, as it seamlessly integrates with traditional back-end frameworks.

The conversation touches on Vue.js's adoption in different regions, particularly in Asia, attributing its success to Evan's active participation in Chinese social networks. Additionally, Evan underscores the importance of high-quality Chinese documentation.

The episode concludes with Evan sharing the pace and satisfaction he found in working on Vue.js during its early stages, contrasting it with the more complex decision-making processes required as the project grew. Evan's work on Vue.js and Vite has had a significant impact on the web development landscape, and his commitment to fostering a thriving open-source community continues to shape the future of front-end development.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

From Learning to Code to Open Source Advocate: Brian Douglas, First Hire at Netlify and First Dev Advocate at GitHub

Tracy Lee and Brian Douglas chat about coding, self-learning, open source, and developer relations in this episode of Just Ship IT. Brian's coding journey started in 2013 during a challenging period when his son was born prematurely, requiring a prolonged hospital stay. He sought a way to locate churches near the hospital and realized the need for a church review app. This sparked his determination to learn to code. Brian highlights many successful developers didn't follow the traditional college route but instead found their way through self-learning and unwavering dedication. Brian's path to coding was largely self-guided. He utilized various online tutorials and courses to acquire the skills he needed. His learning adventure led him to the world of Ruby on Rails. Tracy and Brian emphasize the difference between self-motivated learners and those who treat coding as a checkbox item. They discuss the significance of immersing oneself in the learning process to truly grasp the fundamentals. Brian worked at Netlify for about two years, a journey that began when he switched to Netlify for hosting. Eventually, Matt from Netlify reached out, offering Brian a role that would help shape the JAMstack landscape. This diverse role at Netlify involved both front-end engineering and DevRel activities. Brian shares the story of creating OpenSauced.pizza. This tool exemplifies his dedication to empowering the open source community. Brian has made significant contributions in open source. He discusses the importance of mentoring others to contribute to open source projects and foster a culture of collaboration. The evolution of open source metrics is brought up, emphasizing that there's more to success than just star counts. Metrics like commit velocity and issue-to-PR conversion offer deeper insights into a project's health and growth. Brian and Tracy conclude their conversation with a discussion on developer relations (DevRel). They stress that DevRel professionals should prioritize engagement and building relationships over focusing solely on metrics and numbers....

Oct 31, 2023

2 mins

Just Ship It

Behind the Scenes at CodePen & CSS Tricks with Chris Coyier

In this episode of Just Ship It, Tracy Lee chats with Chris Coyier, known for CSS Tricks and CodePen. CSS Tricks, a staple in the development community, was founded in 2007 as a blog. Chris reflects on how it all began and how this project has evolved over the years. One of the significant milestones in CSS Tricks' history was its acquisition by Digital Ocean about a year ago. Chris expresses his satisfaction with the fact that the team and content have been preserved, ensuring that the valuable knowledge and community of CSS Tricks continue to thrive. Chris and Tracy touch on Chris's early work and how he got started with CSS Tricks. He worked at SurveyMonkey while concurrently managing CSS Tricks. Chris outlines the birth of CodePen, a platform that revolutionized the way developers embed code demos directly into their blog posts. He sheds light on how CodePen secured $1 million in funding and how that investment played a pivotal role in expanding the team and facilitating growth. The discussion covers the intricacies of fundraising for startups and the advantages and challenges that come with it. CodePen has been in operation for over a decade with over 10 million page views per month, peaking at a staggering 12 million. It has become an integral part of documentation sites for popular technologies like React, Vue, Smashing Magazine, and MDN. Social media, especially Twitter, played a crucial role in driving CodePen's growth. Tracy mentions platforms like Seesmic and Omegle, highlighting how trends from the past can resurface and gain popularity once again. The conversation then shifts towards personal branding in the tech industry and how it has evolved over time. They explore the challenges faced by developers who strive to maintain a strong personal brand in the modern era. Chris and Tracy emphasize the importance of starting a blog without overthinking it, pointing back to their early days of blogging about topics they were passionate about. They reflect on the freedom and creativity that comes with not knowing too much, allowing individuals to share their genuine excitement and discoveries. Chris shares some decisions he would have made differently, such as creating separate editors for CodePen. They discuss the complex nature of adding features that initially seem promising but eventually become maintenance nightmares. The conversation touches on the pressures of blogging, from the desire to always be right to the potential for making accessibility mistakes. They highlight the importance of embracing the journey, learning from mistakes, and continually evolving. Chris mentions that his success with CSS Tricks undoubtedly contributed to the marketing and growth of CodePen. As CodePen continues to evolve, the team is hard at work developing the next version of the platform to take it to the next level....

Oct 12, 2023

2 mins

Just Ship It

What’s New for Astro & TypeScript + “Team Islands” with Elian, Josh, & Chris (Backstage @ CityJS Conf)

Elian Van Cutsem, Josh Goldberg, and Chris Noring, joined Tracy Lee backstage at CityJS Conf London to talk about what’s new in the Astro, and TypeScript ecosystems. The conversation also touched on the utilization of iterators in JavaScript and their potential to augment web application functionality. The group weighed in on hot topics in web development, like islands, resumability, and the nuanced interplay between TypeScript and iterators were explored, offering profound insights into optimizing code for enhanced user experiences. The discourse also highlighted the paramount importance of collaboration in driving advancements within web development. Despite perceived competition among technologies, the group emphasized the importance of collaboration for propelling innovation. By fostering a collaborative environment where different technologies learn from each other's strengths, address shared challenges, and collectively evolve, the web ecosystem becomes more inclusive and progressive. Furthermore, the podcast episode explored the empowering aspects of the Astro ecosystem, and TypeScript. The group elaborated on the latest updates and advancements in these tools, emphasizing their capacity to empower developers. Astro, renowned for its modern approach to front-end development, alongside the robust capabilities of TypeScript, equips developers with the means to craft scalable, maintainable code and exceptional web experiences....

May 1, 2024

1 min

TypeScriptAstro

What is Cypress Studio?

Introduction Cypress Studio has been around for some time. It was introduced in Cypress v6.3.0, removed in v10, and reintroduced in v10.7.0. This blog post will dive into its current state and how to use it today. What is Cypress Studio Cypress Studio is a tool built on top of Cypress. It offers an interface for creating tests as if you were using your site without requiring code to be written. It adds functionality to query elements and to add assertions from the interface. It's important to note that Cypress Studio is still under an experimental flag and lacks support for Component Testing (another feature of Cypress). Creating an app to test We first need a working app because the tool we will use is meant for end-to-end tests. I'll pick Svelte and Vite for this demo, but you can choose any framework. Cypress is agnostic in that matter. ` Make sure to select the Svelte and Typescript options to follow along. Now open your project location, install dependencies, and start your app to ensure everything works correctly. ` Installing and setting up Cypress Studio Now it's time to add Cypress to our dev dependencies. ` With our dependency installed, let's launch it so we can start configuring it. But first let’s add an entry under scripts in our package.json file. ` ` A new window will open that will guide us through the initial setup. Select the "E2E Testing" option to create the required configuration files. Then, you can close the window. A new folder called cypress and a configuration file cypress.config.ts are created at the root of our project. To enable Cypress Studio, we must open the newly created configuration file and add the experimentalStudio property. ` For this project, we need to ensure that TypeScript is configured properly for Cypress when it runs, as it conflicts with the one in our root folder. We will extend the original typescript configuration and override some properties. Create a new tsconfig.json file inside the' cypress' folder. ` You can find more information on setting up TypeScript with Cypress in their documentation Creating tests Now that our setup is complete let's write our first test. We will create a folder called e2e and a new test file. ` Open the new file and create an outline of your tests. Don't add anything to them. I initialized my file with a few tests. ` There is an option to create spec files from the interface, but it will contain some initial content that you most likely remove. There’s third option to scaffold multiple specs files, these can serve as a learning resource for writing tests as it contains many different scenarios tested. Make sure your app is running and, in another terminal, start cypress. ` Select E2E testing and Chrome. You should now see a list with all your test files. Click on home.cy.ts. Your tests will run and pass because we have not made any assertions. This looks the same as if we haven't enabled Studio, but there's a new detail added when you hover on any of the tests: a magic wand that you can click to start recording events and adding assertions directly in the UI. Let's start with our first tests and check what assertions we can make. The first step is to navigate to a page. This interaction will be recorded and added to the test. To make assertions, right-click on an element and select the ones you want to add. After we complete our test, let's review our generated code. Go to the test file and see the changes made to it. It should look something like this. ` Cypress Studio will attempt to pick the best selector for the element. In this case, it was able to choose button because it is unique to the page. If there were more buttons, the selector would've been different. You can interact with elements as if you were using the page regularly. Note that Studio supports a limited set of commands: check, click, select, type, and uncheck. Let's record our second test and verify that the button will increase its count when clicked. That was quick. Let's review our generated test. ` So far, our tests have been very accurate and didn't need any modifications. However, take Studio as a helper to write tests visually and their selector as suggestions. Let's take the bottom link with the text "SvelteKit" as an example. It will generate the assertion: ` This selector is accurate, but modifying the elements' structure or order would break the tests. We don’t want tests to break for reasons that do not affect our users. A change in order does not have the same impact for the user as changing the text of a button or changing the url of a link. These selectors should be as specific as possible, but rely as less as possible on implementation details. Selecting images by its alt attribute it’s a way to find a specific element and at the same time ensure that element is accessible. (Accessibility has a direct impact on users) As a counterpart, when clicking any of the logos above, we will get very interesting selectors (and assertions). ` With these assertions, we check that our images have an alt attribute set and are tied to a specified link. Conclusion As with any other automated tool, check the output and solve any issues that you may find. Results depend on the structure of the page and Cypress Studio's ability to choose an adequate selector. Overall, this tool can still help you write complex tests with plenty of interactions, and you can later modify any selectors. Besides the selector, I found it helpful in writing the assertions. If you’re new to Cypress or e2e testing, it can be of great help to go from an idea to a working test. Reviewing these tests can be a great way to learn how these tests are built....

May 3, 2024

5 mins

CypressTesting

Creator of Vue.js and Vite: Evan You's Journey From Google Engineer to Open Source Pioneer

You might also like

From Learning to Code to Open Source Advocate: Brian Douglas, First Hire at Netlify and First Dev Advocate at GitHub

Behind the Scenes at CodePen & CSS Tricks with Chris Coyier

What’s New for Astro & TypeScript + “Team Islands” with Elian, Josh, & Chris (Backstage @ CityJS Conf)

What is Cypress Studio?

You might also like

From Learning to Code to Open Source Advocate: Brian Douglas, First Hire at Netlify and First Dev Advocate at GitHub

Behind the Scenes at CodePen & CSS Tricks with Chris Coyier

What’s New for Astro & TypeScript + “Team Islands” with Elian, Josh, & Chris (Backstage @ CityJS Conf)

What is Cypress Studio?