DEV Community: 杨飞叶

I developed a portfolio website template for independent developers.

杨飞叶 — Thu, 24 Oct 2024 03:04:14 +0000

I developed a portfolio website template for independent developers. It is based on the Nuxt 3/Tailwind CSS/UnoCSS/Markdown/Element Plus/GSAP tech stack. The homepage is very cool. Feel free to check it out!

GitHub：https://github.com/cunzaizhuyi/dev-portfolio-starter
Demo：https://dev-portfolio-starter.netlify.app/

Seeking feedback, the distribution map website of top universities in the United States is now live

杨飞叶 — Tue, 15 Oct 2024 01:15:26 +0000

I recently developed a website featuring a distribution map of top universities in the United States. The data is sourced from the Times Higher Education (THE) World University Rankings 2025.

The website defaults to displaying the top-ranked university in the U.S. Users can interact with buttons or keyboard shortcuts to switch to the next ranked university.

This site provides students preparing to study abroad and those already overseas with a geographical overview of university distribution in the U.S. For example, by clicking through 10 times, users can gain efficient insights into the distribution of the top 10 universities: the 1st is located in Illinois, the 3rd on the West Coast, and the 6th on the East Coast.

website： https://university-ranking-map.netlify.app/

video： https://www.bilibili.com/video/BV1zYm5YeEmQ/

Hiding all pinned browser extensions with one click

杨飞叶 — Sat, 07 Sep 2024 07:36:51 +0000

Hello everyone, I am a developer and also a content creator. I often need to record instructional videos. Before recording, there are many privacy protection preparations to be made, such as hiding the bookmarks bar, hiding the top toolbar, and hiding the browser extensions I am using.

The browser does not provide a feature to hide all pinned browser extensions with one click, so I developed a plugin.

This plugin is suitable for the following scenarios:

When content creators start recording videos
When teachers start giving lectures
When developers conduct team technical sharing
When employees start internal meeting screen sharing

In these scenarios, you can enable browser privacy protection with one click by hiding all pinned browser extensions.

At the same time, you get a cleaner and more aesthetically pleasing interface, which also makes sharing itself more focused.

Install

This extension has been published to the app store.
You can complete the installation in the following ways:

A browser extension called "Open New Tab For Developers"

杨飞叶 — Fri, 06 Sep 2024 03:26:25 +0000

As a developer, I often browse websites like Medium.com and Hacker News, but the links on these sites open in the same tab. After reading an article, I have to navigate back to the main site, which negatively impacts the user experience. Opening links in a new tab would be much better.

Therefore, I created a browser plugin called "Open New Tab."

Why did I have to write a new plugin? Because I searched for and used some existing plugins, but they mostly implemented a general logic. This general logic is simple and indeed works for most websites. However, it is not enough; merely writing general logic does not work for some specific websites. The functionality of this kind of plugin is quite similar to ad-blocking plugins, which need to handle the specific DOM structure of particular websites.

Take Medium, for example. Its <a> tag's href attribute is not a complete URL but a strange path string. The complete URL is actually in the data-href attribute of an ancestor element. So for this site, the better approach is to get the complete URL and then open it in a new tab.

Therefore, the feature of this plugin is that, while it meets the need to open links in new tabs for all regular websites like Google, it also provides special handling for websites that developers frequently visit, such as Medium and Hacker News.

So, a more fitting name for this plugin would actually be: "Open New Tab For Developers."

tutor：https://www.bilibili.com/video/BV1hrpMe4E6x/
GitHub：https://github.com/cunzaizhuyi/open-new-tab-extension

My first VSCode plugin for syntax conversion of import statements

杨飞叶 — Mon, 02 Sep 2024 02:27:08 +0000

This is a plugin for syntax conversion of import statements.

Sometimes you need to modify import statements, such as changing import { a } from 'b' to const { a } = require('b');.
You can use this plugin for that purpose.

You can install it

You can search in vscode with keywords Convert Import Statements.

Here is a tutor video

We hope everyone will like it. If you have any questions, please provide feedback on GitHub.